Реагируйте на setState, не отображающий представление таблицы начальной загрузки - PullRequest
Новая
       31

Реагируйте на setState, не отображающий представление таблицы начальной загрузки

0 голосов
/ 05 июня 2019

У меня есть этот компонент с таблицей начальной загрузки и модальным. Пользователь должен иметь возможность войти в модальное состояние и изменить состояние одних и тех же данных как для таблицы, так и для модального режима; Тем не менее, я вижу, что он только меняет представление в модальном, а не в таблице?

Компонент со столом и модалом: 

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>


        );

    }
}

Modal: 

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);

};

Я вижу, что состояние корректно изменяется. Однако таблица по-прежнему имеет то же представление со старыми данными состояния, даже если состояние было изменено.

Может кто-нибудь подсказать мне, что я делаю неправильно?

1 Ответ

0 голосов
/ 05 июня 2019

Я думаю, вы должны использовать props.data вместо this.props.data

constructor(props) {
  super(props);

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