如何在状态挂钩中从获取请求中设置数据（对象数组）？

Question

您好，我在我的 App 组件中使用 axios 获取数据，然后在我的 SearchResults 组件的屏幕上显示它。

我目前发出我的 get 请求（在用户输入输入字段后 - 在另一个组件中）并使用 setSearchResults 将所有数据存储在我的状态 searchResults 中。然后我将数据作为道具传递给我的 SearchResults 组件，并通过它使用 & 映射，并根据一些逻辑在屏幕上显示正确的数据。

我想知道直接在我的异步函数中而不是在 SearchResults 组件中的函数中执行我的逻辑是否更有效。

我试图在异步函数中执行逻辑（可以在下面找到），但我的结果没有正确显示。当我在输入字段中输入内容时，它会检索与用户输入内容无关的数据。保持原样会更好吗？它不起作用的原因是因为我在状态挂钩中错误地设置了我的 get 请求中的数据吗？任何帮助表示赞赏，在此先感谢您！

function App() {
    const [keyword, setKeyword] = useState("")
    const [searchResults, setSearchResults] = useState([])

    const getAllData = async () => {
        return await getDataService(keyword)
            .then(({ data }) => {
                // currently I am just doing: 
                   setSearchResults(data.list)

                // my attempt below for doing the logic directly here 
                //instead of in showSearchResults() in my other component:
                return data.list.map((item) => {
                  if(item.searchterm.includes(keyword.toLowerCase())) {
                    setSearchResults([...searchResults, item])
                }
              })
            })
            .catch((err) => console.log(err))
    }

    return (
        <div className="App">
            <form className="container">
                <InputField keyword={keyword} setKeyword={setKeyword} getClothesData={getClothesData} />
                <SearchResults keyword={keyword} searchResults={searchResults} />
            </form>
        </div>
    );
}

const SearchResults = ({ keyword, searchResults }) => {
  const showSearchResults = () => {
    return searchResults.map((item, index) => {
      if (item.searchterm.includes(keyword.toLowerCase()) && keyword.length > 1) {
        return (
          <div className="text-bold" key={index}>
            <ul>
              <li className="input-fields search-results">
               {item.searchterm}
              </li>
            </ul>
          </div>
        );
      }
    });
  };
  return <div>{ keyword ? showSearchResults() : null }</div>;
}

Answer 1

看起来您尝试应用的逻辑不正确。

return data.list.map((item) => {
  if(item.searchterm.includes(keyword.toLowerCase())) {
    setSearchResults([...searchResults, item])
}

在这里，您正在映射列表中的项目，并一次又一次地设置searchResults 状态。 React 可能会使其成为批量更新，并且不会总是采用之前的状态值。

您可以通过在setSearchResults 中提供功能更新来避免这种情况发生

看看Why React useState with functional update form is needed?

Answer 2

在 useEffect 挂钩中发出您的服务器请求： 模板是这样的：

const App = () => {
  const [state, setState] = useState([])
  
  useEffect(() => {
    axios(url).then(({ data }) => setState(data))
  }, []) // empty array here means that hooks works once

}