Question

嗨，我正在使用Appios组件中的axios获取数据，然后将其显示在SearchResults组件的屏幕上。

我当前正在发出我的get请求（在用户在另一个组件中输入了输入字段之后），并使用searchResults将所有数据存储在我的状态setSearchResults中。然后，我将数据作为道具传递给我的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

}

如何通过状态挂钩中的get请求设置数据（对象数组）？

2 个答案: