在反應中更改高階組件中的道具

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的道具。

但是，很快，當我收到 API 響應時，HOC 會在我的控制台中記錄done ，但我的組件中的數據沒有更新。 我究竟做錯了什么？

Answer 1

道具是不可變的。 這個

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批量執行狀態更新。