Визуализация части функционального компонента после завершения асинхронного вызова - PullRequest
Новая
       21

Визуализация части функционального компонента после завершения асинхронного вызова

1 голос
/ 02 июня 2019

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

callAPI("xyz")

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

Проблема здесь в том, что когда компонент выполняет вызов, он должен дождаться ответа API и затем обработать результат, но он получает нерешенное обещание, поэтому он не может выполнить визуализацию. 

<Paper square>
    {callAPI("xyz").results.map(
        result => console.log(result);
    )}
</Paper>

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

Любые предложения по исправлению этого кода будут очень полезны.

EDIT: 

function IntegrationDownshift() {
    return (
        <div>
            <Downshift id="downshift-simple">
                {({
                    getInputProps,
                    getItemProps,
                    getMenuProps,
                    highlightedIndex,
                    inputValue,
                    isOpen,
                    selectedItem
                }) => (
                    <div>
                        {renderInput({
                            fullWidth: true,
                            InputProps: getInputProps({
                                placeholder: "Search users with id"
                            })
                        })}

                        <div {...getMenuProps()}>
                            {isOpen ?
                                 <Paper square>
                                {callAPI(inputValue).users.map(
                                    (suggestion, index) =>
                                        renderSuggestion({
                                            suggestion,
                                            index,
                                            itemProps: getItemProps({
                                                item:
                                                    suggestion.userName
                                            }),
                                            highlightedIndex,
                                            selectedItem
                                        })
                                )}
                            </Paper>  
                             : null}
                        </div>
                    </div>
                )}
            </Downshift>
        </div>
    );
}

Ответы [ 2 ]

1 голос
/ 02 июня 2019

React 16.8 вводит Хуки :

Хуки - это функции, которые позволяют вам «зацепить» состояние React и функции жизненного цикла из компонентов функций.

таким образом, у вас есть useState(), который вы можете объявить переменной состояния с пустым массивом и вызвать свой API в useEffect(), чтобы заполнить состояние, когда вы получите ответ отAPI: 

function App() {

  const [data, setData] = useState([]);

  useEffect(() => {
    callAPI("xyz").then(result => {
      setData(result);
    })  
  }, []);

  if(!data.length) return (<span>loading...</span>);

  return (
    <Paper square>
        {data.map(
            result => console.log(result);
        )}
    </Paper>
  );
}

Подробнее о крючках: https://reactjs.org/docs/hooks-intro.html.

0 голосов
/ 02 июня 2019

Самый простой способ справиться с этим с помощью выражения ternanry А также рекомендуется вызывать ваш запрос API в методе жизненного цикла, а затем сохранять результат в локальном состоянии. 

componentDidMount() {
    callAPI("xyz").results.map(
        result => this.setState(result);

}

<Paper square>
    {this.state.results ?
      this.state.results.map(
        result => console.log(result);
      : <p> Loading... </p>
    )}
</Paper>
...