Javascript 在react中更改高阶组件中的道具

我试图了解更高阶组件（以下称为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} />)
        }
    }
}

从“React”导入React；
从“react native”导入{Text}；
从“axios”导入axios；
导出默认值（元素，道具={}）=>{
//测试用模拟道具
道具={
API请求：{
“托多利斯特”：{
url:“https://jsonplaceholder.typicode.com/todos"
}
}
}
返回类扩展了React.Component{
组件willmount（）{
让API=Object.keys（props.apiRequests）；
for（设i=0；i{
控制台。警告（“完成”）
props.api请求[API[i]].done=true
props.api请求[API[i]].data=resp.data
})
}
}
render（）{
返回（）
}
}
}

现在，当我用上面的HOC包装我的组件时，我得到了

done

作为

false

的道具

---

但是，很快，当我得到API响应时，HOC会在控制台中记录

done

，但组件中的数据不会更新。我做错了什么？

道具是不变的。这个

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

返回类扩展React.Component{
this.state={}；
componentDidMount（）{
让API=Object.keys（props.apiRequests）；
for（设i=0；i{
this.setState（{api[i]]：resp.data}）；
})
}
}
render（）{
返回（）
}
}

---

根据预期接收数据的方式，状态更新可以通过

承诺批量执行。所有指出
组件弃用的
+1都将装载
。很多人不在乎那些与问题没有直接关系的坏习惯，只是不加注释。嗯，我明白了，谢谢你的回答。另一个不切实际的问题是，既然我是个新来的反应者，这种即兴行为有意义吗？这方面是否有任何性能/可维护性警告？@AyushGupta不客气。您可以通过使其
React.PureComponent
并成批执行请求来提高性能。可能有道理，取决于你的情况。通常，你不仅需要提出请求，还需要以某种方式处理它。如果HOC接受承诺并以解析值作为道具呈现包装组件，那么它将更加灵活。