Блог

Я новичок в реагировании, я программирую функцию onAdd() , когда я вызываю ее, она должна добавить элемент state , а затем я обновляю крючок новым элементом setBooks(state) .

 const state = {
  books: [
    { id: 0, rating: 4, title: "Harry Potter y el cáliz de fuego", image: "libro01.jpg"},
    { id: 1, rating: 3, title: "The shining", image: "libro02.jpg" },
    { id: 2, rating: 5, title: "Código Da Vinci", image: "libro03.jpg" },
    { id: 3, rating: 5, title: "El principito", image: "libro04.jpg" },
    { id: 4, rating: 5, title: "Sobrenatural", image: "libro05.jpg" },
  ],
  copyBooks: []
};

function App() {

  const [books, setBooks] = useState(state);

  const onAdd = (item)=>{
    //add new item to books
    console.log('Add: ', item);
    const id = state.books[state.books.length-1].id  ;
    item['id'] = id;
    state.books.push(item);
    setBooks(state);
  }

  return (
    <div className="App">
      <Menu onadd={onAdd}/>
      <List items={books.books}/>
    </div>
  );
}
 

это прекрасно работает внутри, я печатаю объект «книги», и он обновлен.
Когда я пытаюсь распечатать данные дочернего <List /> компонента, они не печатаются, пока я не внесу изменения на сервере и они не будут обновлены.
Я пришел к выводу, что проблема в том, что компонент списка <List /> не обновляется.

books относится к крючкам и books.books к данным.

Я не знаю, как я могу это решить, я знаю, что это что-то базовое, но я начинаю с этой технологии.

Ваша onAdd функция изменяет состояние, то есть React видит ту же ссылку на объект, что и раньше, и не будет обновляться. Чтобы убедиться, что произойдет обновление, скопируйте массив и установите состояние новой копии:

 const onAdd = (item) => {
  //add new item to books
  console.log('Add: ', item);
  const id = state.books[state.books.length-1].id   1;
  item['id'] = id;
  const newBooks = [...state.books, item];
  setBooks({ ...state, books: newBooks });
}
 

Правка: кстати, я мог бы порекомендовать несколько менее запутанную терминологию при именовании переменных. Локальная books переменная фактически ссылается на все состояние, а затем books.books ссылается на фактические книги… это приведет к ошибкам, потому что это очень запутанно.