Как переместить данные из API в Statehook? - PullRequest
Новая
       13

Как переместить данные из API в Statehook?

1 голос
/ 11 марта 2019

Я сталкивался с этой проблемой более одного раза и мог бы воспользоваться некоторыми советами. У меня есть вызов 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 на состояние.

1 Ответ

1 голос
/ 11 марта 2019

Чтобы отобразить результаты в дочернем элементе формы, вы хотите сделать что-то вроде этого, где результаты поиска устанавливаются в состояние компонента формы и передаются в компонент, который их отображает.

Я упростил функцию запроса для удаления большого количества кода, который просто изменяет одно имя свойства из списка документов и высмеивает его для примера. 

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. В последнем случае вы можете переместить состояние, содержащее результаты, и функцию поиска в компонент контекста и экспортировать функцию и результаты, использовать ее из формы, чтобы выполнить вызов и установить состояние, и использовать ее из другого компонента, чтобы получить доступ к государству. Вам также необходимо отобразить поставщик контекста в дереве компонентов над обоими компонентами.

Может быть, сейчас начнем с простого решения, приведенного выше.

...