ComponentDidMount看不到家长的道具

Question

我是新来的反应，我又被卡住了。我试图映射我的数组，以在我的子组件中创建新的对象数组。这是我的问题——我的方法组件迪迪蒙特在数据来自父母道具之前被执行，我的状态保持为空。当我console.logingthis.props和组件的末尾，我收到空数组，但当我console.loging渲染方法它给我4个空数组，然后它填充到预期的300。我做错了什么？

父组件：

import "./App.css";
import { CompanyList } from "./components/companylist/companylist.component";
import { Searchfield } from "./components/searchfield/searchfield.component";

class App extends Component {
    constructor(props) {
        super(props);
        this.state = {
            companies: [],
            searchfield: "",
        };
    }

    componentDidMount = () => {
        const URL = "https://xxxxx/companies";
        fetch(URL)
            .then((response) => response.json())
            .then((data) => this.setState({ companies: data }))
            .catch((error) => {
                console.error("Error", error);
            });
    };

    render() {
        const filteredCompanies = this.state.companies.filter((item) =>
            item.name.toLowerCase().includes(this.state.searchfield.toLowerCase())
        );
        return (
            <div>
                <Searchfield
                    handleChange={(e) => this.setState({ searchfield: e.target.value })}
                />
                <CompanyList companies={filteredCompanies} />
            </div>
        );
    }
}

export default App;

儿童部分：

import React, { Component } from "react";
import { Company } from "../company/company.component";

export class CompanyList extends Component {
    constructor(props) {
        super(props);
        this.state = {
            newArray: [],
        };
    }

    componentDidMount = () => {
        const filledArray = this.props.companies.map((item) => {
            let result;
            fetch(`https://xxxxx/incomes/${item.id}`)
                .then((response) => response.json())
                .then((data) => {
                    let transactionsToFloat = data.incomes.map((item) =>
                        parseFloat(item.value)
                    );
                    result = transactionsToFloat.reduce((acc, num) => {
                        return acc + num;
                    }, 0);
                    result = Math.round(result * 100) / 100;
                });
            return {
                id: item.id,
                name: item.name,
                city: item.city,
                totalIncome: result,
            };
        });
        this.setState({ newArray: filledArray });
        console.log(this.props);
    };

    render() {
        console.log(this.props);
        return (
            <div>
                <table>
                    <thead>
                        <tr>
                            <th> Id </th>
                            <th> Name </th>
                            <th> City </th>
                            <th> Total income </th>
                        </tr>
                    </thead>

                    {this.props.companies.map((item) => (
                        <Company key={item.id} company={item} />
                    ))}
                </table>
            </div>
        );
    }
}

Answer 1

componentWillMount（）发生在render（）之前。componentDidMount（）在之后发生。

这是因为React从根本上是如何工作的。React应该让人感觉快速、流畅、敏捷。应用程序不应使用http请求或异步代码登录。答案是使用生命周期方法来控制DOM。

当组件挂载时意味着什么？

更好地理解一些React词汇可能会有所帮助。当一个组件被装入时，它被插入到DOM中。这是调用构造函数的时候。componentWillMount几乎与构造函数同义，并且几乎同时被调用。componentDidMount仅在第一次渲染后调用一次。

组件将安装--