单击按钮时如何使用状态列出结果

Question

我正在尝试编写一个组件，在单击“查找”按钮时列出一组结果。但是，当我单击“查找”按钮时，当我调用

results

时，

setResults([])

状态变量不会被重置。

它也不返回结果数组中的每个结果，仅返回最新的结果。我也可能错误地称呼

results.map

或

result.resultItems.map

吗？

这就是我点击“查找”按钮三次时的样子：

即使再次单击“查找”按钮，我也需要它看起来像这样：

  const SearchContact = () => {
    const [results, setResults] = useState([]);

    const handleFind = () => {
      setResults([]);

      const response = [
        { name: "Tim", email: "[email protected]" },
        { name: "Fred", email: "[email protected]" }
      ];

      for (var i = 0; i < response.length; i++) {
        const resultItems = [];

        resultItems.push(<div>{response[i].name}</div>);
        resultItems.push(<div>{response[i].email}</div>);

        setResults([...results, { resultItems: resultItems }]);
      }
    }

    return (
      <Button onClick={handleFind}>Find</Button>
        {results.map((result, index) => {
          return (
            <div key={index}>
              {result.resultItems.map((resultItem, index) => {
                return <div key={index}>{resultItem}</div>;
              })}
            </div>
          );
      })}
    )
}

Answer 1

尝试一下：

 const SearchContact = () => {
  const [results, setResults] = useState([]);

  const handleFind = () => {
    const response = [
      { name: "Tim", email: "[email protected]" },
      { name: "Fred", email: "[email protected]" }
    ];

    const newResults = response.map((item) => {
      const resultItems = [
        <div key="name">{item.name}</div>,
        <div key="email">{item.email}</div>
      ];

      return { resultItems };
    });

    setResults(newResults);
  };

  return (
    <div>
      <Button onClick={handleFind}>Find</Button>
      {results.map((result, index) => (
        <div key={index}>
          {result.resultItems.map((resultItem, idx) => (
            <div key={idx}>{resultItem}</div>
          ))}
        </div>
      ))}
    </div>
  );
};