在异步调用完成后呈现部分 React 函数组件

IT技术 javascript reactjs material-ui react-component react-async
2021-04-26 17:57:20

我正在使用带有 React 功能组件的 material-ui 并使用其自动完成组件。我自定义了它，每当我更改输入字段中的文本时，我希望该组件呈现新的搜索结果。

callAPI("xyz")

我在 action 中调用 API 并使用 xyz 参数，我正在从这个函数组件调用 dispatch 方法。

这里的问题是，当组件进行调用时，它应该等待 API 响应然后呈现结果，但它得到了一个未解决的Promise，所以它无法呈现。

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

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

任何纠正此代码的建议都将非常有帮助。

编辑：

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个回答

React 16.8 引入了Hooks：

钩子是让你从函数组件“挂钩”到 React 状态和生命周期特性的函数。

因此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。

处理这个问题的最简单方法是使用三元表达式，也是在生命周期方法中调用 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>
其它你可能感兴趣的问题
上一篇从 React.js 中递归渲染的组件更新状态 下一篇带传感器（BLTouch、电感式、电容式）的自动床位调平 (ABL)，它是如何工作的？