如何将数据从 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

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

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

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

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

How do I move data from from an api to statehook?

javascript

ajax

reactjs

fetch-api

react-hooks