React 状态钩子变量与 ui 不一致答案

【问题标题】：React state hook variable is inconsistent with uiReact 状态钩子变量与 ui 不一致
【发布时间】：2021-02-11 21:00:04
【问题描述】：

我有一个反应应用程序，它使用状态挂钩来跟踪列表中有多少项目。当我从列表中删除项目时，UI 会更新，但底层元素数组仍会显示所有元素。这是一个演示问题的代码框。

// App.js

export default function App() {
  const handleRemoveRow = (i) => {
    console.log("state array: " + feesArray);
    console.log("index to remove: " + i);
    setFeesArray(
      feesArray.filter((_, index) => {
        console.log("filtering index: " + index);
        return index !== i;
      })
    );
  };

  const [feesArray, setFeesArray] = useState([
    <ListItem handleRemoveRow={handleRemoveRow} index={0} key={0} />,
    <ListItem handleRemoveRow={handleRemoveRow} index={1} key={1} />,
    <ListItem handleRemoveRow={handleRemoveRow} index={2} key={2} />
  ]);

  return (
    <>
      <ul>{feesArray}</ul>
    </>
  );
}

// ListItem.js

export default function ListItem(props) {
  return (
    <li>
      <IconButton
        onClick={() => {
          props.handleRemoveRow(props.index);
        }}
      >
        <CloseIcon />
      </IconButton>
    </li>
  );
}

https://codesandbox.io/s/sleepy-leakey-zewrb?file=/src/App.js

如果您尝试通过单击“x”来删除项目，您将看到一行被删除，但底层数组将保留 3 个项目，并且不允许删除更多项目。提前致谢。

【问题讨论】：

标签： reactjs react-hooks material-ui state

【解决方案1】：

您将 index 静态传递给 ListItem，但在尝试删除元素时使用数组中的相对索引。

所以一开始，index 属性匹配数组中的索引：

[
    <ListItem handleRemoveRow={handleRemoveRow} index={0} key={0} />, // Array index 0
    <ListItem handleRemoveRow={handleRemoveRow} index={1} key={1} />, // Array index 1
    <ListItem handleRemoveRow={handleRemoveRow} index={2} key={2} /> // Array index 2
]

这就是您可以在第一次删除它的原因。但是假设您删除索引 1，您的数组将变为：

[
    <ListItem handleRemoveRow={handleRemoveRow} index={0} key={0} />, // Array index 0
    <ListItem handleRemoveRow={handleRemoveRow} index={2} key={2} /> // Array index 1
]

然后如果你尝试删除带有index={2} 的那个，它会尝试在数组中找到位置2，而这个位置已经不存在了。

我假设您正在尝试在数组中呈现动态数据。我建议您将数据与 ListItem 组件的呈现分开，如下所示：

  const [feesArray, setFeesArray] = useState([
    { value: "a" },
    { value: "b" },
    { value: "c" }
  ]);

  return (
    <>
      <ul>
        {feesArray.map((fee, i) => (
          <ListItem handleRemoveRow={handleRemoveRow} key={i} index={i} />
        ))}
      </ul>
    </>
  );

工作代码和框：

https://codesandbox.io/s/little-monad-cqqsh?file=/src/App.js:389-679

【讨论】：