Question

正在获取数据并将其设置为状态。但是，当我尝试根据输入的长度更新该状态（过滤）时，会比较棘手。问题是长度小于2时未设置状态。

为什么不起作用？这是不好的做法吗？

（注释部分是另一种方式。它正在起作用。）

Here's the code on codesandbox

Answer 1

您不应修改用于过滤的数据，因为如果这样做，您在过滤时会丢失原始数据。

更好的方法是将过滤后的结果保存到新的状态变量中

还请注意，由于您正在检查搜索输入的长度，因此只有键入2个字符才能看到过滤结果

要注意的另一件事是，您正在使用更新后立即设置为state的搜索值，由于状态更新受闭包影响，因此将不起作用。

查看此帖子以获取更多详细信息：useState set method not reflecting change immediately

工作解决方案

import React, { useState, useEffect } from "react";

const UsersList = props => {
  const [data, setData] = useState({ records: [] });
  const [search, setSearch] = useState("");
  const [filter, setFilter] = useState({ records: [] });

  useEffect(() => {
    fetch("https://reqres.in/api/users?page=2")
      .then(response => response.json())
      .then(json => {
        setData({ records: json.data });
        setFilter({ records: json.data });
      });
  }, []);
  return (
    <div>
      <label>Enter to search the user</label>
      <br />
      <input
        type="text"
        value={search}
        onChange={e => {
          const searchVal = e.target.value;
          setSearch(searchVal);
          const text = e.target.value.toLowerCase();
          const myRecords = JSON.parse(JSON.stringify(data.records));
          console.log(myRecords);
          if (searchVal.length + 1 >= 2) {
            const newRecords = data.records.filter(
              user =>
                user.first_name.toLowerCase().indexOf(text) >= 0 ||
                user.last_name.toLowerCase().indexOf(text) >= 0 ||
                user.email.toLowerCase().indexOf(text) >= 0
            );
            setFilter({ records: newRecords });
          } else {
            setFilter({ records: data.records });
          }
        }}
      />
      <pre>
        {/* <code>{JSON.stringify(filter, null, 2)}</code> */}
        <code>{JSON.stringify(filter, null, 2)}</code>
      </pre>
    </div>
  );
};

export default UsersList;

获取数据，将其设置为状态并根据输入的长度更新该状态

1 个答案: