reactjs - 单击按钮时未按预期过滤数组

Question

有人可以向我解释为什么过滤方法没有按预期工作吗？我正在尝试使用基于名字的过滤结果更新我的对象数组。

export default function App() {
  const { data } = useDataFetcher();
  const searchArray = data;

  const [inputField, setInputField] = useState("");

  const searchUser = () => {
      searchArray.filter((el) => el.firstName.includes(inputField));
  };

  useEffect(() => {
    searchUser();
  }, [inputField]);

  return (
    <div className="App">
      <h1>Xaxis Frontend Interview</h1>

      <input onChange={(e) => setInputField(e.target.value)} />
      <button onClick={(e) => searchUser()}> Search </button>

      {searchArray.map((userData, i) => (
        <Users
          key={i}
          firstName={userData.firstName}
          lastName={userData.lastName}
          email={userData.email}
          bio={userData.bio}
        />
      ))}
    </div>
  );
}

标签： reactjs

Answer 1

您需要创建一个包含用户列表的状态。然后，您希望在inputField状态更改时更新此状态。

export default function App() {
  const { data } = useDataFetcher();
  const searchArray = data;

  const [users, setUsers] = useState([])
  const [inputField, setInputField] = useState("");

useEffect(() => {
    setUsers(data);
  }, [data]);

  useEffect(() => {
     const filteredArray = users.filter((el) => el.firstName.includes(inputField));
    setUsers(filteredArray)
  }, [inputField]);

  return (
    <div className="App">
      <h1>Xaxis Frontend Interview</h1>

      <input onChange={(e) => setInputField(e.target.value)} />

      {users.map((userData, i) => (
        <Users
          key={i}
          firstName={userData.firstName}
          lastName={userData.lastName}
          email={userData.email}
          bio={userData.bio}
        />
      ))}
    </div>
  );
}

或者，如果您想通过单击按钮来更新用户列表：

export default function App() {
  const { data } = useDataFetcher();
  const searchArray = data;

  const [users, setUsers] = useState([])
  const [inputField, setInputField] = useState("");

useEffect(() => {
    setUsers(data);
  }, [data]);


  const searchUser = () => {
      const filteredArray = users.filter((el) => el.firstName.includes(inputField));
setUsers(filteredArray)
  };

  return (
    <div className="App">
      <h1>Xaxis Frontend Interview</h1>

      <input onChange={(e) => setInputField(e.target.value)} />
      <button onClick={() => searchUser()}> Search </button>
      {users.map((userData, i) => (
        <Users
          key={i}
          firstName={userData.firstName}
          lastName={userData.lastName}
          email={userData.email}
          bio={userData.bio}
        />
      ))}
    </div>
  );
}