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

Question

假设我有一个渲染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() 的承诺被解析之前呈现，并且 PivotGrid 没有数据。

我希望组件在 promise 解决并实际返回数据时重新渲染。我已经尝试过 React 的 useState() 的变体，将 props.data 视为状态变量，这样当承诺返回时，状态会改变，组件也会更新。但这还没有奏效。

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

上述尝试都失败了。实现此功能的最佳方式是什么，当prop.data 解析并实际保存我想要的数据时，组件会重新呈现？

Answer 1

为 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'))

Answer 2

为什么不改成下面这样的有状态组件

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} />
   }

}