Question

我有一个具有Bootstrap Table和Modal的组件。用户应该能够进入模式并为表和模式更改相同数据的状态；但是，我看到它仅更改模式视图中的视图，而不更改表中的视图？

具有表和模态的组件：

export class TableAndModal extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            data: this.props.data,
            showModal: false,
            index: ""
            }
        };
        this.setShow = this.setShow.bind(this);
        this.handleShowAndChange = this.handleShowAndChange.bind(this);
    }

    columns = [{
        dataField: "view",
        text: "View"
        formatter: (cell, row, rowIndex) => {
            return (
                <div>
                    <Button variant="info" onClick={() => this.setShow(rowIndex)}>View</Button>
                </div>
            );
        }
    }, 
      {dataField: 'fullName', text: 'Full Name' }, 
      {dataField: 'studentDesc', text: 'Student Description'}, 
      {dataField: 'email', text: 'Email'}, 
      {dataField: 'fullNotes', text: 'Full Notes'}, 
      {dataField: 'edu', text: 'Education'}, 
      {dataField: 'phone', text: 'Phone Number'}, 
      {dataField: 'id', text: 'ID'}];

    setShow(index) {
        this.setState({
            showModal: true,
            index: index
        });
    }

    handleShowAndChange = (name, value) => {
        this.setState((prevState) => {
            let newState = {...prevState};
            newState[name] = value;
            return newState;
        });
    };

    render() {
        return (
            <div>
                <BootstrapTable
                    hover
                    condensed={true}
                    bootstrap4={true}
                    keyField={'id'}
                    data={this.state.data.info}
                    columns={this.columns}
                />
                <Modal data={this.state.data.info} index={this.state.index}
                                     showModal={this.state.showModal} onChange={this.handleShowAndChange} />
            </div>


        );

    }
}

模式：

this.state = {
    data: this.props.data
   };

handleInfoChange = (index) => (name, value) => {
    let info = this.state.data.info.slice();
    info[index][name] = value;
    this.props.onChange("info", info);

};

我看到状态已正确修改。但是，即使状态已更改，该表仍具有与旧状态数据相同的视图。

有人可以指导我做错什么吗？

Answer 1

我认为您应该使用props.data而不是this.props.data

constructor(props) {
  super(props);

  this.state = {
     data: props.data,
     showModal: false,
     index: ""
  }
}

反应setState不呈现引导表的视图

1 个答案: