时间戳

首页 > 解决方案 > 函数组件总是在渲染中使用先前的状态

reactjs - 函数组件总是在渲染中使用先前的状态

问题描述

我对使用钩子和功能组件很陌生。

我有一个过滤列表。当我尝试更新过滤器时，它将使用最后一个过滤器状态而不是新的过滤器状态。我一定错过了一些渲染/状态更改命令，但我似乎无法弄清楚它是什么。

我很感激我能得到的任何帮助:)

伪代码如下：

export default function TransferList(props) {
  const [wholeList, setWholeList] = React.useState([]);
  const [filteredList, setFilteredList] = React.useState([]);
  const [filter, setFilter] = React.useState([]);

  return (
    <>
      <TextField
        value={filter}
        onChange={(e) => {
          // Set filter input
          setFilter(e.target.value);

          // Filter the list
          let filtered = wholeList.filter(
            (item) => item.indexOf(filter) !== -1
          );
          setFilteredList(filtered);
        }}
      />

      <List>
        {filteredList.map((item) => (
          <ListItem>Item: {item}</ListItem>
        ))}
      </List>
    </>
  );
}

标签： reactjsreact-hooks

解决方案

在 onChange 内部，您应该使用将值保存在一个常量中，因为这是一个异步操作，filter所以不会在之后更新。setFilter(filterValue)

<TextField
  value={filter}
  onChange={e => {
    const filterValue = e.target.value;
    // Set filter input
    setFilter(filterValue);

    // Filter the list
    let filtered = wholeList.filter(item => item.indexOf(filterValue) !== -1);
    setFilteredList(filtered);
  }}
/>;

推荐阅读