onChange antd Input 组件没有使用来自 axios 的列表正确设置状态（挂钩）在 React 中获取

Question

我是 React 的新手，过去一周一直在研究它。我正在尝试制作一个简单的应用程序，它有一个 'product create' 表单和一个带有搜索栏的产品列表（使用来自 antd 的输入组件）；在列表中我可以点击任何产品打开详细信息页面。

现在我被一些不正常工作的逻辑或我想念的东西阻止了。当我使用我在代码中创建的数组尝试 Input onChange 时，它工作正常，但现在我使用的是模拟 api（准确地说是 fakestoreapi.com），我做不到工作。

ProductsList.tsx

function ProductsList() {
  const [list, setList] = useState<Array<Product>>([]);
  const [loading, setLoading] = useState<boolean>(true);

  useEffect(() => {   // I think something is wrong here
    ProductService.getAll()
      .then((res: any) => {
        setList(res.data);
        setLoading(false);
      })
      .catch((e: Error) => console.log(e));
  }, []);  // tried: 'query' const from state, 'filterList' from state 
  
  function onChange(e: React.ChangeEvent<HTMLInputElement>) {   // Or here (or both here and in useEffect)
    console.log('in onChange');
    const filterList: Array<Product> = list.filter((item) =>
      item.title.toLowerCase().startsWith(e.target.value.toLowerCase())
    );
    setList(filterList);
  }

  return (
    <div>
      <Spin spinning={loading}>
        <List
          header={
            <Input
              type="text"
              placeholder="Search product"
              allowClear
              onChange={onChange}
            />
          }
          split
          dataSource={list}
          renderItem={(item) => (
            <List.Item key={item.id}>
              <Link to={`/products/${item.id}`}>{item.title}</Link>
            </List.Item>
          )}
        ></List>
      </Spin>
    </div>
  );
}

export default ProductsList;

我尝试向 useEffect 挂钩添加一些依赖项，但也许它们是错误的。正如我所说，使用本地数组这很有效，但现在在加载完整列表一次后，当我进入输入并搜索内容时，列表被删除了。我想我发现了问题，因为我没有将列表重置为完整列表，但我实际上不知道该怎么做（这就是我来这里的原因）。我试图在网上搜索一些东西，但除了依赖项，我没有找到具体的东西来帮助我。

如果需要，这里是 ProductService.getAll() 函数：

function getAll() {   // http is axios
    return http.get<Array<Product>>(`/products`);
}

如果需要，我很乐意添加所有可能有用的内容。

Answer 1

const [list, setList] = useState<Array<Product>>([]); // The full list
const [filteredList, setFilteredList] = useState<Array<Product>>([]); // the list you display

  function onChange(e: React.ChangeEvent<HTMLInputElement>) {   // Or here (or both here and in useEffect)
    console.log('in onChange');
    const temp: Array<Product> = list.filter((item) => //keep the filter on the full list but only display the filtered list
      item.title.toLowerCase().startsWith(e.target.value.toLowerCase())
    );
    setFilteredList(temp);
  }
//the datasource: dataSource={filteredList}

onChange antd Input 组件没有使用来自 axios 的列表正确设置状态（挂钩）在 React 中获取

onChange antd Input component doesn't setState (hook) properly with list from axios get in React

typescript

reactjs

axios

antd

react-hooks