在完成异步调用后呈现部分Reaction函数组件 [英] Rendering part of a React function component after async call gets completed

查看:15
本文介绍了在完成异步调用后呈现部分Reaction函数组件的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我正在使用带有Reaction功能组件的Material-UI,并使用它的AutoComplete组件。我自定义了它,每当我更改输入字段中的文本时,我都希望该组件呈现新的搜索结果。

callAPI("xyz")

我在操作中调用API,并使用xyz参数从此函数组件调用调度方法。

这里的问题是,当组件进行调用时,它应该等待API响应,然后呈现结果,但它得到了一个未解析的承诺,因此它呈现失败。

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

由于结果是一个未解决的承诺,它将无法映射。 我需要一些方法来仅在数据可用时调用地图,或者在数据存在之前显示一些文本,然后在获取数据后进行更改。

任何更正此代码的建议都将非常有用。

编辑:

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>
    );
}

推荐答案

Reaction 16.8介绍Hooks

钩子是一些函数,您可以通过这些函数"挂钩"反应状态和生命周期 来自功能组件的功能。

所以您有useState(),您可以使用空数组声明一个状态变量,并在useEffect()中调用您的API以在从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

这篇关于在完成异步调用后呈现部分Reaction函数组件的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆