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

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

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

    render() { 

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

     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.id)} 
            handleSubmit={this.handleSubmit} 
            handleInputChange={this.handleInputChange} 
           /> 
           : 
           <TableWithDataBody 
            key={row.id} 
            cells={row.cells} 
            handleEdit={this.handleEdit.bind(null, row.id)} 
           /> 
          )} 
         </tbody> 
        </table> 
       </div> 
      </div> 
     ); 
    } 
} 

таблица данных начинается с:

import React from 'react'; 

export default class TableWithDataBody extends React.Component { 
    state = {cells: this.props.cells}; 

    handleEdit =() => { 
     this.props.handleEdit(); 
    }; 

    render() { 

     let {cells} = this.state; 

     return (
      <tr> 
       {cells.map(cell => { 
        return <td key={cell.id} className="text-center">{cell.contents}</td> 
       })} 
       <td> 
        <button className="btn btn-primary" onClick={this.handleEdit}><i className="fa fa-pencil"></i>Edit</button> 
       </td> 
      </tr> 
     ); 
    } 
} 

В построчно форме редактирования:

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} /></td> 
       })} 
       <td> 
        <button className="btn btn-default"><i className="fa fa-ban" onClick={this.editStop}></i>Cancel</button> 
        <button className="btn btn-success"><i className="fa fa-cloud" onClick={this.handleSubmit}></i>Save</button> 
       </td> 
      </tr> 
     ); 
    } 
} 

Помощь с примерами будет m uch оценил, извините, если код немного беспорядок прямо сейчас!

Спасибо за ваше время

Answer 1

я мог бы что-то не хватает, но я не вижу, где вы редактируете rows состояние? Обработчик изменений просто изменяет input, и вы не передаете входной сигнал в таблицу данных.

Единственный раз, когда я устанавливаю rows, находится в componentDidMount, что объясняет, почему оно заселено, но не изменено.