Question

当道具数据作为道具传递时，它在componentWillMount中未定义，但在render内定义。可能是什么问题??? 的呈现：

 public state: any = {
    authority: [],
    cid: "1",
    data: [],
    id: [],
    menuTitle: []
};
public componentWillMount() {
    var temp: any;
    let url: String = "http://localhost:9000/getFieldTitle/";
    fetch(url + this.state.cid + "")
        .then((response) => response.text()).then((value) => {
            let jsonObject = JSON.parse(value);
            for (let index in jsonObject) {
                for (let header in jsonObject[index]) {
                    temp = [];
                    if (header === "id") {
                        temp = this.state.id;
                        temp.push(jsonObject[index][header])
                        this.setState({ id: temp })
                    }
                    if (header === "menuTitle") {
                        temp = this.state.menuTitle;
                        temp.push(jsonObject[index][header])
                        this.setState({ menuTitle: temp })
                    }
                    if (header === "dataFormat") {
                        temp = this.state.data;
                        temp.push(jsonObject[index][header])
                        this.setState({ data: temp })
                    }
                    if (header === "authority") {
                        temp = this.state.authority;
                        temp.push(jsonObject[index][header])
                        this.setState({ authority: temp })
                    }
                }
            }
        })
        .catch(e => console.log(e));

}
public render() {
    let row = []
    for (let i = 0; i < this.state.authority.length; i++) {
        row.push(<FormSection
                key={i}
                id={this.state.id[i]}
                cid={this.state.cid[i]}
                menuTitle={this.state.menuTitle[i]}
                data={this.state.data[i]}
                />
        )
    }
    return (
        <div className="container-fluid">
            {row}
        </div>
    );
}

FormSection.tsx ：

<MenuSectionStructure data={this.props.data} check="check" />

MenuSectionStructure.tsx ：

import * as React from "react";

export class MenuSectionStructure extends React.Component<any, any> {
    public state: any = {
        authority: [],
        dataType: [],
        fieldName: [],
    };

    constructor(props: any) {
        super(props);
    }

    public componentWillMount() {
       console.log(this.props.data) // Gives undefined
    }

    public render() {
        return (
            <div>{this.props.data}</div>  //Gives value of this.props.data
        );
    }

}

我已经显示了所有数据

Answer 1

我认为你的问题绝对是Max Sidwani评论的问题。首次加载父组件时，将在componentDidMount中启动各种setState。标题权限可能在 dataFormat 之前。这意味着您的组件将重新呈现（及其所有子项）两次。第一次，authority.length将是一个大于0的整数，因此渲染将循环并尝试渲染FormSection组件，其中数据prop将是未定义的，因为dataFormat头尚未处理且数据状态还是[] 。然后，设置数据状态，并且在第二次重新渲染中，数据不是未定义的。您无法观看两个渲染，因为第一个渲染没有渲染，第二个渲染在中间，但由于您使用了setState两次，渲染被调用两次（第一次设置权限，第二次设置数据集）。您可以通过以下方式查看：

public componentWillUpdate() {
       console.log(this.props.data) // Not undefined
    }

在MenuSectionStructure组件中。

您可以通过在初始提取时在同一setState 设置两个状态或检查数据在渲染中是否为空来解决此问题。

Answer 2

是的，我通过将整个数据作为单个道具发送然后解析最低的组件来找到答案，以便我可以根据需要将所有对象显示为组件中的道具。问题是将多个数据作为道具发送并选择一个道具作为道具长度在循环中导致所有问题，因为它们都是数组和设置状态随机命中导致循环具有不需要的序列。但是，将整个数据作为单个道具发送然后在内部循环可以解决我的问题。感谢您的贡献，这有助于我分配可视化场景的原因。

在componentswillmount中，props是未定义的，但在typescript中的render中显示？

}

2 个答案: