React - 如何获取更新的数据以显示在我的表格中？

Question

我需要能够更新表格行中的值，然后在单元格中显示这些新值。我该怎么做呢？

这是我目前正在使用的代码：

主表组件

import React from 'react';
import TableWithDataHeader from './TableWithDataHeader.jsx';
import TableWithDataBody from './TableWithDataBody.jsx';
import TableWithDataRowForm from './TableWithDataRowForm.jsx';
import {updateRowHistory} from '../../actions/DALIActions';
import AppStore from '../../stores/AppStore';

export default class TableWithData extends React.Component {
    state = {rows: [], isEditing: false, input: null};
    updateState = () => {
        let rows = this.state.rows;
        rows.shift();
        rows.push({id: AppStore.getRowId(), cells: AppStore.getUpdatedCells()});
        this.setState({rows});
        console.log(rows);
    };

    componentDidMount() {
        let rows = this.state.rows;
        rows.push({id: AppStore.getRowId(), cells: AppStore.getCells().historycells});
        this.setState({rows});
        console.log(rows);
        AppStore.addChangeListener(this.updateState);
    }

    handleEdit = (row) => {
        this.setState({isEditing: true});
    };

    handleInputChange = (newCellValuesArray) => {
        let input = this.state.input;
        input = newCellValuesArray;
        this.setState({input});
    };

    editStop = (row) => {
        this.setState({isEditing: false});
    };

    handleSubmit = (access_token, row_id) => {
        let newCellValuesArray = this.state.input;
        updateRowHistory(access_token, row_id, newCellValuesArray);
        this.setState({isEditing: false});
    };

    componentWillUnmount() {
        AppStore.removeChangeListener(this.updateState);
    }

    render() {

        let {rows, isEditing, input} = this.state;

        console.log(rows);
        console.log(rows.map(row => {
            return row.cells;
        }));

        return (
            <div>
                <div className="row">
                    <table className="table table-striped">
                        <thead>
                            <TableWithDataHeader />
                        </thead>
                        <tbody>
                            {rows.map(row => this.state.isEditing ? 
                                <TableWithDataRowForm key={row.id} cells={row.cells} editStop={this.editStop.bind(null, row)} handleSubmit={this.handleSubmit.bind(this)} handleInputChange={this.handleInputChange.bind(this)} /> : 
                                <TableWithDataBody key={row.id} cells={row.cells} handleEdit={this.handleEdit.bind(null, row)} />
                            )}
                        </tbody>
                    </table>
                </div>
            </div>
        );
    }
}

编辑行组件

import React from 'react';
import AppStore from '../../stores/AppStore';

export default class TableWithDataRowForm extends React.Component {
    state = {cells: this.props.cells, newCellValues: []};

    onChange(e) {
        let newCellValues = this.state.newCellValues;
        newCellValues[e.target.id] = e.target.value;
        this.setState({newCellValues});
        console.log(newCellValues);
        let newCellValuesArray = [];
        for (let key in newCellValues) {
            if (newCellValues.hasOwnProperty(key)) {
                newCellValuesArray.push({contents: newCellValues[key]});
            }
        }
        console.log(newCellValuesArray);
        this.props.handleInputChange(newCellValuesArray);
    }

    editStop() {
        this.props.editStop();
    }

    handleSubmit(e) {
        e.preventDefault();

        let access_token = AppStore.getToken();
        let row_id = AppStore.getRowId();

        this.props.handleSubmit(access_token, row_id);
    }

    render() {

        let {cells, newCellValues} = this.state;

        return (
            <tr>
                {cells.map(cell => {
                    return <td key={cell.id} className="text-center"><input type="text" className="form-control" id={cell.id} defaultValue={cell.contents} onChange={this.onChange.bind(this)} /></td>
                })}
                <td>
                    <button className="btn btn-default"><i className="fa fa-ban" onClick={this.editStop.bind(this)}></i>Cancel</button>
                    <button className="btn btn-success"><i className="fa fa-cloud" onClick={this.handleSubmit.bind(this)}></i>Save</button>
                </td>
            </tr>
        );
    }
}

目前它有点混乱，但我认为您可以大致了解我正在尝试的内容！因此，我可以让表格最初使用商店中的数据值呈现，并且可以成功地将它们编辑为不同的值。但是，我希望这样当我单击保存按钮时会显示新值。我正在使用带有通量的 React 来构建它。

非常感谢您提供示例答案

感谢您的宝贵时间

Answer 1

你的问题是你有两次我们细胞的状态。 一次在你的行中，一次在你的桌子上。 您永远不应该这样做，而是只在表格中拥有状态并将它们作为道具传递并作为道具访问它们。只有临时编辑的 vakue 应保存为额外状态。 您可以通过 componentWillReceiveProps 获取 prop 更改。

这里是一个精简的例子：

var Row = React.createClass({

    getInitialState: function() {
        return {
            tempValue: this.props.value 
        }
    },

    componentWillReceiveProps: function(nextProps) {
        //here u might want to check if u are currently editing but u get the idea -- maybe u want to reset it to the current prop on some cancelEdit method instead
        this.setState({
            tempValue: nextProps.value 
        });
     },

     render: function() {
        return <div><input type="text" value={this.state.tempValue} onChange={this.onChange} /></div>;
     },

     onChange: function(e) {
        this.setState({
            tempValue: e.target.value
        });
     }
});


var Hello = React.createClass({

    getInitialState: function() {
        return {
            value: 'someServerState' 
        }
    },

    render: function() {
       return (
         <div>
           <Row value={this.state.value} />
           <button onClick={this.reloadFromServer} >reload from Server</button>
         </div>
       );
    },

    //this will be triggered by some of ur events - i added a button
    reloadFromServer: function() {
       this.setState({
          value: 'someServerState changed somehow' 
       });
    }
});

见：https://jsfiddle.net/69z2wepo/34292/