Изменение состояния до того, как оно рендерится

Question

У меня проблема с передачей пустого реквизита из родительского компонента в дочерний. Я считаю, что это потому, что я пытаюсь установить состояние моих данных в функции, а не в конструкторе (для родительского компонента); Я хочу установить состояние данных только при нажатии кнопки «Дисплей» .

Как я могу изменить this.state.data на this.props.data.dataList [rowIndex] сразу, когда я нажму кнопку «Показать», и чтобы повторное рендеринг с измененным состоянием?

Я получаю неопределенный или нулевой указатель, потому что мой this.props.data не существует в дочернем компоненте, потому что он рендерится до нажатия "Display" кнопки.

Я пробовал условный рендеринг, и, если возможно, я хочу попытаться его избежать.

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 является правдивым (не забывайте, что пустой объект является правдивым (!!{} === true), поэтому вам следует начинать data в вашем состоянии с чего-то ложного)

Тем не менее, рекомендуется иметь эту проверку и в вашем Child компоненте. Вы можете использовать тот же подход для проверки в методе рендеринга и ничего не отображать, если данные пусты