Function 组件在渲染中始终使用以前的 state

Question

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

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

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

伪代码如下：

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>
    </>
  );
}

Answer 1

在 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);
  }}
/>;

Answer 2

State 更新是异步的，因此过滤器 state 更新不会立即反映后记

您必须存储新的过滤器值并根据它设置状态

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
                const newFilter = e.target.value;
                setFilter(newFilter)

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

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

Answer 3

所以事实证明，我必须首先给初始过滤列表提供整个未过滤列表。 出于某种原因修复它。

const [filteredList, setFilteredList] = React.useState(props.wholeList);

我最初想要一个空过滤器不显示任何内容，但是当过滤器为空时我可能不得不满足于显示整个列表

Answer 4

订购您的代码以提高可读性

在干净的代码中

主要变化：

• 使用解构而不是道具
• 从 html 返回 jsx 增加可读性
• 使用包含而不是 indexOf

• 将密钥添加到列表

  export default function TransferList({ wholeList }) { const [filteredList, setFilteredList] = React.useState(wholeList); const [filter, setFilter] = React.useState([]); const handleOnChange = ({ target }) => { setFilter(target.value); const updatedFilteredList = wholeList.filter(item => item.includes(target.value)); setFilteredList(updatedFilteredList); } const list = filteredList.map(item => { return <ListItem key={item}>Item: {item}</ListItem> }); return ( <> <TextField value={filter} onChange={handleOnChange} /> <List>{list}</List> </> ); }

我有一个过滤器组件在里面做过滤器列表。

import React, { useState } from 'react';

function FilterInput({ list = [], filterKeys = [], placeholder = 'Search',
  onFilter }) {

  const [filterValue, setFilterValue] = useState('');

  const updateFilterValue = ev => {
    setFilterValue(ev.target.value);
    const value = ev.target.value.toLowerCase();
    if (!value) onFilter(list);
    else {
      const filteredList = list.filter(item => filterKeys.some(key => item[key].toLowerCase().includes(value)));
      onFilter(filteredList);
    }
  }

  return (
    <input className="filter-input" type="text" placeholder={placeholder}
      value={filterValue} onChange={updateFilterValue} />
  );
}

export default FilterInput;

来自父组件的调用如下所示

<FilterInput list={countries} filterKeys={['name']} placeholder="Search Country"
          onFilter={filterCountries} />

这是在我的电晕应用程序中。您可以查看我的 Github。

看看我是如何构建过滤器的

（ https://github.com/omergal99/hello-corona ）