材料表不會添加行

Question

React 是 JS 的新手。 嘗試使用帶有添加行按鈕的材料表。 添加行不會添加行。 一個刷新行被重置。 我很確定我在設置/更新 state 時做錯了什么。

 export default function App() { return ( <div className="App"> <Tabl obj={{ a: "a", items: [{ x: 1 }, { x: 2 }, { x: 3 }] }} /> </div> ); }

 class Tabl extends Component { constructor(props) { super(props); this.state = { obj: props.obj }; console.log(JSON.stringify(this.state.obj)); } updateState(newData) { this.setState({ obj: [...this.state.obj.items, newData] }); } render() { const currObj = this.state.obj; const column = [ { title: "a", field: "x" } ]; const tableIcons = { Add: forwardRef((props, ref) => <AddBox {...props} ref={ref} />), Check: forwardRef((props, ref) => <Check {...props} ref={ref} />), Clear: forwardRef((props, ref) => <Clear {...props} ref={ref} />) }; return ( <MaterialTable data={currObj.items} columns={column} icons={tableIcons} options={{ search: false, paging: false }} editable={{ onRowAdd: (newData) => new Promise((resolve, reject) => { setTimeout(() => { this.updateState(newData); resolve(); }, 1000); }) }} /> ); } } export default Tabl;

提前致謝。

Answer 1

this.updateState 方法未綁定到 class。

您可以像這樣綁定構造函數，

constructor(props) {
    super(props);
    this.state = {
      obj: props.obj
    };
    console.log(JSON.stringify(this.state.obj));
    this.updateState= this.updateState.bind(this);
  }