当状态更新 React JS 时，Map 函数不会呈现新元素

Question

I have 2 components, OneBook component has an option to "add to collection", i have an onClick event that sets the state of "collect" to true (default value is false of course). In my second component "Collection", i have a map function that returns a list of book elements (with title, author,etc) IF its collect state is true. Yet when i click on the "add to collection" which sets the state to true successfully (because i console logged it and the state is being updated), the map function isn't showing the elements even though they have the state of collect set as true.

Here is my code for clarity. Or you can see the code sandbox to edit the code directly: https://codesandbox.io/s/stupefied-lewin-06f6m?file=/src/OneBook.js

OneBook.js

const [collect, setCollect] = useState(true)

return (
<small onClick={() => {setCollect(true);console.log(collect)}} className="addcollect"><i className="fas fa-bookmark bookmark"></i>Add To Collection</small>
)

Collection.js

{
   books.map(book => {
      return (book.collect? <li><img src={book.img} alt="img"/>{book.title} <span>{book.author}</span></li> : "")
    })
}

Answer 1

You were not updating the books value in context properly and also collect value has no impact on the orignal books array in context. Have a look at the codesandbox below.

Let me know if it helps

Codesandbox link

Note:

As you asked for the explanation of this:

return { ...elem, collect: true };

I am using the spread operator here, which essentially keep all the value of books object and just update the collect field.

Let's see one example below:

A = {
 a: 1,
 b: 2
}

B = {...A, b: 3}

Now B will be having something like this structure:

{
 a: 1,
 b: 3
}

Answer 2

As i see you dont update the actual book object in the context when you click on add to collection.

change your onClick fn to this

const setCollect = (value) => {
  //loop though all the books and change the collect property of the book after the add to collection click
  const showedBook = books.map(b => {
    if (b.isbn !== props.isbn) {
      return b;
    }

    return {
      ...b,
      collect: value,
    };
  });

  setBooks(
    [...showedBook]
  );
};


);

};

<small onClick={() => setCollect(true)}....

updated demo

Answer 3

It is because the collect state has no relations to book object. So you need to create a function that updates the books .

const addToCollection = () => {
    books.map((book) => {
      if (book.isbn === props.isbn) {
        console.log(book.isbn)
        book.collect = true;
      }
    });

    return;
  };

Then call it on click event on your Add to collection button.

<small
   onClick={() => {
   addToCollection();
   }}
   className="addcollect"
 >
   <i className="fas fa-bookmark bookmark"></i>Add To Collection
</small>