javascript - 在 react 中更改高阶组件中的 Prop

Question

我正在尝试理解高阶组件(以下称为 HOC):

因此，我创建了一个示例 HOC 来为我的组件执行 GET 请求:

import React from 'react';
import { Text } from 'react-native';
import axios from 'axios';

export default (Elem,  props = {}) => {
    // mock props for testing
    props = {
        apiRequests: {
            "todoList": {
                url: "https://jsonplaceholder.typicode.com/todos"
            }
        }
    }
    return class extends React.Component {
        componentWillMount() {
            let apis = Object.keys(props.apiRequests);
            for(let i = 0; i < apis.length; i++) {
                props.apiRequests[apis[i]].done = false
                axios.get(props.apiRequests[apis[i]].url).then((resp) => {
                    console.warn("done")
                    props.apiRequests[apis[i]].done = true
                    props.apiRequests[apis[i]].data = resp.data
                })
            }
        }

        render() {
            return (<Elem {...props} />)
        }
    }
}

现在，当我用上面的 HOC 包装我的组件时，我得到了 done 为 false 的 Prop 。

但是，很快，当我收到我的 API 响应时，HOC 会在我的控制台中记录 done，但我的组件中的数据不会更新。我做错了什么？

Answer 1

Prop 是不可变的。这个

props.apiRequests[apis[i]].done = true

是一个错误，不会导致子组件重新渲染。

从异步请求接收到的状态应该存储在组件状态中，setState 触发重新渲染。 componentWillMount 已被弃用，因为它被误用于异步例程。应该是:

return class extends React.Component {
    this.state = {};

    componentDidMount() {
        let apis = Object.keys(props.apiRequests);
        for(let i = 0; i < apis.length; i++) {
            axios.get(props.apiRequests[apis[i]].url).then((resp) => {
                this.setState({ apis[i]]: resp.data });
            })
        }
    }

    render() {
        return (<Elem data={this.state} />)
    }
}

根据预期接收数据的方式，可以使用 Promise.all 批量执行状态更新。