Question

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

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。对于后者，您可以将保存结果的状态以及搜索功能移到上下文组件中，然后导出该函数和结果，从窗体中使用它进行调用并设置状态，然后从其他组件中使用它来访问状态。您还需要在两个组件上方的组件树中呈现上下文提供程序。

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

如何将数据从api移动到状态钩？

1 个答案: