Почему обновление моего списка не вызывает повторного рендеринга моего компонента? - PullRequest
Новая
       140

Почему обновление моего списка не вызывает повторного рендеринга моего компонента?

0 голосов
/ 06 августа 2020

Учитывая приведенный ниже код, я ожидал бы увидеть новый элемент списка, добавленный в, когда я нажимаю кнопку. Данные о состоянии обновляются, но модель DOM не меняется. Признаюсь, что я новичок ie в React и Hooks, так что надеюсь, это просто вопрос того, что я не понимаю используемую здесь модель привязки. 


import React, {useState,useEffect} from 'react';
import './App.css';

function App() {

  const [someList, setSomeList] = useState([]);

  useEffect(() =>
    {
      const someDataForTheList = [1,2,3];
      setSomeList(someDataForTheList);
    }, []);

  const onClickAddToList = () =>
      {
        let newDataForTheList = someList;
        newDataForTheList.push(someList.length + 1);

        setSomeList(newDataForTheList);

        console.log(someList);
      }

  return (
    <div className="App">
        <h1>{someList ? someList.length : null}</h1>
        <ul>
          {someList ? someList.map((i) =>
              <li key={i}>
                {i}
              </li>)
              : null}
        </ul>
        <button onClick={onClickAddToList}>Add to list</button>
    </div>
  );
}

export default App;

1 Ответ

0 голосов
/ 06 августа 2020

Это связано с тем, что React не выполняет глубокую проверку при проверке обновлений (по умолчанию). Таким образом, добавление нового элемента в тот же список с последующим его повторным назначением с помощью метода отправки ловушки React определяет, что это тот же объект / элемент, что делает вывод, что представление не нужно обновлять.

Однако вы можете сделайте следующее: 

const onClickAddToList = () => {
  // creating a new list
  const newDataForTheList = [...someList, someList.length + 1];
  setSomeList(newDataForTheList)
}
...