Javascript 当异步prop承诺解决时，如何更新React组件？

假设我有一个呈现

PivotGrid

组件的组件。这个

PivotGrid

获取一些数据，一个对象数组

function My_component(props) {
    return <PivotGrid dataSource={props.data} />
}

发生的情况是，组件在解析

get_data（）

中的承诺之前呈现，并且数据透视网格没有数据

我希望组件在承诺解析并实际返回数据时重新呈现。我尝试了React的

useState（）

变体，将

props.data

视为状态变量，以便在promise返回时，状态将更改，组件将更新。但这还没有奏效

const [gridData, setGridData] = useState(props.data);
props.data.then((r) => {
    setGridData(props.data)
})

---

像上面这样的尝试都失败了。实现此功能的最佳方法是什么？当

prop.data

解析并实际保存我想要的数据时，组件重新呈现？为什么不更改为下面这样的有状态组件

class My_component extends React.Component {
   state = {};

   componentDidMount(){
     this.get_data()
   }

   get_data = async () => {
     const data = await o(url, options).get('foo').query({});
     this.setState({ data });
   }

   render() {
      const { data } = this.state;
      return <PivotGrid dataSource={data} />
   }

class My_组件扩展React.component{
状态={}；
componentDidMount（）{
这个。获取_数据（）
}
get_data=async（）=>{
const data=await o（url，options）.get（'foo'）.query（{}）；
this.setState（{data}）；
}
render（）{
const{data}=this.state；
返回
}

---

}

为My_组件使用挂钩和容器组件应该可以工作

my-component-container.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 React，{useState，useffect}来自“React”
从“./My component”导入My_组件
导出默认值（）=>{
const[data，setData]=useState（null）
useffect（异步（）=>{
const fetchData=async（）=>{
const result=await o（url，options）.get（'foo'）.query（{}）
设置数据（结果）；
};
fetchData（）；
}, [])
返回
}

在您的入口点：

import My_component_container from './my-component-container'

ReactDOM.render(<My_component_container />, document.getElementById('root'))

从“./My component container”导入我的组件容器
ReactDOM.render（，document.getElementById（'root'））

查看

useffect

您可以调用

get_data

函数，在

My_component

中，而不是通过道具传递数据，在那里您可以使用挂钩或将其转换为React component来控制组件的渲染。感谢@simomatavuj的响应。我想将此数据作为道具传递，以便此组件可重用。您可以创建一个包装器，该包装器将获取数据并将其传递给您的

My\u组件

，由于此项目的性质，它必须是一个功能组件。我还必须将数据作为道具传递进来，因为这个组件必须是可重用的，并且将从不同的来源获取数据。感谢您的回复！我已经试过了，但效果不太好，但我认为这是朝着正确方向迈出的一步。以这种方式创建容器组件会抛出一个错误，即useEffect无法返回异步函数，正确的方法是在useEffect中编写一个异步函数并立即调用它。这仍然不起作用，但是…@jpc你是对的，我更新了答案，记住了你的评论

import My_component_container from './my-component-container'

ReactDOM.render(<My_component_container />, document.getElementById('root'))