Question

给出下面的代码，当我单击按钮时，我希望看到一个新的列表项添加到。状态数据似乎已更新，但DOM不变。我承认自己是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;

Answer 1

这是因为在检查更新时，react不进行深度检查（默认情况下）。因此，将新项目推送到同一列表中，然后使用钩子的dispatch方法React将其再次分配，React将其确定为相同的对象/项目，从而得出结论，不必更新视图。

您可以执行以下操作：

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

为什么不更新列表会触发组件的重新渲染？

1 个答案: