Question

当我尝试从componentwillmount函数中的api调用更新react组件的状态时，它无法按预期工作。该值未设置。

export default class ListOfProducts extends Component {
        componentWillMount() {
            console.log('component currently mounting');
            fetchOrder().then(data => {
                console.log('order api call has been finished.', data);
                this.setState(data, function() {
       //this should print new data but i am still getting old data 
                    console.log('current this.state.', this.state.orders)
                })
            })
        }
        constructor(props) {
            super(props);

            this.state = {
                "orders": {
                    "order_items": []
                }
            };
        }
        render() {
            let productList = [];
            let productUnit = (
                <View>
          {this.state.orders.order_items.map(function(order,i){
            return <ProductListItem
              delivered={true}
              productSKU={3}/>
          })}
          </View>
            );
            return productUnit;
        }
    }

Answer 1

如果您想执行任何异步请求，我建议您在componentDidMount生命周期方法中执行它们。这是基于Reactjs documentation for componentDidMount的建议路径。

立即仅在客户端（不在服务器上）调用一次   初始渲染发生后。在生命周期的这个阶段，   你可以访问你孩子的任何参考（例如，访问   底层DOM表示）。 componentDidMount（）方法   子组件在父组件之前调用。

如果要与其他JavaScript框架集成，请设置计时器   使用setTimeout或setInterval，或发送AJAX请求，执行这些   这种方法的操作。

Answer 2

也许你需要改变： “扩展组件{” 至 “扩展了React.Component {”

状态未在componentWillMount

2 个答案: