假设我有一个呈现 PivotGrid
组件的组件。这个 PivotGrid 接受一些数据,即对象数组。
function My_component(props) {
return <PivotGrid dataSource={props.data} />
}
但是,我想要传入的 data
属性是异步函数的结果。
const get_data = async () => {
return await o(url, options).get('foo').query({})
}
ReactDOM.render(<My_component data={get_data()}/>, document.getElementById('root'));
发生的情况是,组件在 get_data()
的 promise 得到解决之前渲染,并且 PivotGrid 没有数据。
我希望发生的是当 promise 解析并实际返回数据时组件重新渲染。我尝试了 React 的 useState()
的变体,将 props.data
视为状态变量,这样当 promise 返回时,状态就会改变,组件也会更新。但这还没有奏效。
const [gridData, setGridData] = useState(props.data);
props.data.then((r) => {
setGridData(props.data)
})
以上尝试都失败了。实现此功能的最佳方法是什么,当 prop.data
解析并实际保存我想要的数据时组件重新渲染?
最佳答案
使用钩子(Hook)和 My_component 的容器组件应该可以。
我的组件容器.js:
import React, {useState, useEffect} from 'react'
import My_component from './my-component'
export default () => {
const [data, setData] = useState(null)
useEffect(async () => {
const fetchData = async () => {
const result = await o(url, options).get('foo').query({})
setData(result);
};
fetchData();
}, [])
return <My_component dataSource={data} />
}
在您的入口点:
import My_component_container from './my-component-container'
ReactDOM.render(<My_component_container />, document.getElementById('root'))
关于javascript - 当 async prop Promise 解析时如何更新 React 组件?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57117701/