如何将数据从api移动到statehook？

Question

我不止一次遇到这个问题，我可以使用一些建议。我有一个api电话。我想在另一个组件中显示结果，该组件是表单的子组件。我已经找到了一个可以将状态映射到jsx的组件，但是我无法理解我从API响应中实际使用新数组的部分。我有一个函数可以从一个单独的模块进行调用。

const data = []  
const search = (values, loadData) => {

fetch(`/search`, {
    method: 'POST',
    headers: headers,
    body: values
})
    .then(checkStatus)
    .then(parseJSON)
    .then(res => {
               let items = res.response.docs

                for (let i = 0; i < items.length; i++) {
                    console.log(items[i].start)

                    data.push({
                        headline: items[i].title,
                        web_url: items[i].web_url,
                        snippet: items[i].snippet

                    })
                }
                console.log(data)
            }

          )
}
const fetcher ={search, otherthings}
export default fetcher

我希望有一组我可以调用的方法来保持模块化，但在将api响应映射到状态时，我有点模糊。

Answer 1

要在表单的子项中显示结果，您希望执行类似这样的操作，其中搜索结果在表单组件状态中设置，并传递给显示它们的组件。

我已经简化了请求函数以删除大量代码，这些代码只更改了文档列表的单个属性名称并为示例模拟了它。

import React, { useState } from "react";

// our search function which will return a promise that resolves to docs
const search = values =>
  // fetch(`/search`, {
  //   method: 'POST',
  //   headers: headers,
  //   body: values
  // })
  //   .then(checkStatus)
  //   .then(parseJSON)
  //   .then(res => res.response.docs);
  Promise.resolve([{ id: 1, name: "doc 1" }, { id: 2, name: "doc 2" }])

// our component to render the results
const Results = ({ docs }) => docs.map(doc => <div key={doc.id}>{doc.name}</div>);

// our Search component with the form that passes results to it's child
const Search = () => {
  const [results, setResults] = useState([]);

  // call setResults with the value returned by `search`
  const doSearch = e => search({ query: e.currentTarget.value }).then(setResults);

  return (
    <div>
      <form>
        <input onChange={doSearch} />
      </form>
      <div>
        <Results docs={results} />
      </div>
    </div>
  )
}

在这里看到工作示例.. https://codesandbox.io/s/5zrx67k94

只需在输入中键入一个char即可触发请求。

要在任何其他组件中显示结果，您要使用中央数据存储（如Redux），或使用React Context。对于后者，您可以将保存结果的状态和搜索功能移动到Context Component中并导出函数和结果，从表单中使用它来进行调用并设置状态，并将其从您的其他组件用于进入国家。您还需要在两个组件上方的组件树中呈现上下文提供程序。

也许从上面的简单解决方案开始吧。