Question

我遇到一个问题，其中空道具从“父”组件传递到“子”组件。我相信这是因为我试图在函数中而不是在构造函数中（针对Parent组件）设置数据状态；我只想在单击“显示” 按钮时设置数据状态。

当我点击“显示”按钮时，如何立即将 this.state.data 更改为 this.props.data.dataList [rowIndex] ，等等它会随着状态的改变而重新渲染？

我一直未定义或指针为空，因为我的 this.props.data 不存在于Child组件中，因为它在单击“显示” 按钮之前呈现。

我尝试了条件渲染，如果可能的话，我想避免这种情况。

export class Parent extends React.Component {
    constructor(props) {
        super(props);  
        this.state = {
            data: {}
        };
        this.handleDisplay = this.handleDisplay.bind(this);
    }

    columns = [
      {dataField: '..', text: '...',
        formatter: (cell, row, rowIndex) => {
            return (
                <div>
                    <Button variant="success" onClick={() => this.handleDisplay(rowIndex)}>Display</Button>
                </div>
            );
        }
        }, 
      {dataField: '..', text: '...' },  
      {dataField: '..', text: '...' }, 
      {dataField: '..', text: '...'}];

    handleDisplay(rowIndex){
            this.setState({
            index: rowIndex,
            data: this.props.data.dataList[rowIndex]
        });
    };

    render() {
        return (
            <div>
                <BootstrapTable
                    hover
                    condensed={true}
                    bootstrap4={true}
                    keyField={'id'}
                    data={this.props.data.dataList}
                    columns={this.columns}
                />
                <Child data={this.state.data}/>
            </div>


        );

    }

}

export class Child extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            data: {}
        };

        this.handleInputChange = this.handleInputChange.bind(this);
    }   

    componentDidMount(){
        this.setState({
            data: this.props.data
        })
    }

    render() {
    return (
    <div>
        <Form.Row>
            <Form.Group as={Col}>
                <Form.Label>Label Name</Form.Label>
                <Form.Control name="labelName" value={this.props.data.labelName}/>
                .
                .
                ..
                ...
                ....
            </Form.Group>
        </Form.Row>
    </div>
    )
    }
}

Answer 1

您可以简单地执行以下操作：

{this.state.data && <Child data={this.state.data}/>}

这样，仅当this.state.data为真时才渲染您的Child组件（不要忘记一个空对象为true（!!{} === true），因此您应该在data上开始虚假的状态

但是，最好在Child组件中进行此验证。您可以使用相同的方法在render方法中进行验证，如果数据为空，则什么也不显示

在渲染之前更改状态

1 个答案: