react（基于class）：如何在对象从子函数传递到父函数后使用setState更新父组件中的JSON对象？

Question

我在“Data.js”和“App.js”中有 JSON 数据，它在状态中初始化。

在“App.js”的“updateList”方法中，我从“Form.js”的“insertIt”中获取“dataa”，我也需要在“updateList”的“updateList”中进行“setstate” “App.js”。

请帮我更正我的“Form.js”的“insertIt”方法和“app.js”的“updateList”方法

App.js

 import { Component } from 'react';
import Items from './Items';
import { list } from './data';
import Form from './form';
class App extends Component {
  constructor(props){
    super(props);
    this.state = {
      listState : list
    }
    this.updateList = this.updateList.bind(this);
  }
  updateList(dataa){
    this.setState(ps=>({
      listState: [
        ...ps.listState,   //  HELP ME FIX THIS PART
        dataa
      ]
    }));
    return dataa;
  }
  render() {
    return (
      <div>
        <Items listofitems={this.state.listState}></Items>
        <Form onsubmit={this.updateList}></Form>
      </div>
    )
  }
}

Items.js

 import React, { Component } from "react";
class Items extends Component{
    render() {
        return(
           <div>
               {this.props.listofitems.map(i=> (
        <center>
            <h2>{i.title}</h2>
            <p>{i.details}</p>
        </center>
    ))}
            </div>
        )
    }
}
export default Items ;

Form.js

import React, { Component } from "react";
class Form extends Component{
    constructor(props){
        super(props);
        this.state={
            input1: '',
            input2: ''
        }
        this.insertIt = this.insertIt.bind(this);
        this.handler1 = this.handler1.bind(this);
        this.handler2 = this.handler2.bind(this);
    }
    handler1(e1){ this.setState({input1: e1.target.value});   }
    handler2(e2){ this.setState({input2: e2.target.value});   }
    insertIt(e){
        e.preventDefault();
        const newItem =
            {
                input1: this.state.input1,
                input2: this.state.input2,
            }
            this.props.onsubmit(newItem);
    }
    render() {
        return(
          <form onSubmit={this.insertIt}>
              <label>Enter both</label>
              <input type="text" value={this.state.input1} placeholder="in roman" onChange={this.handler1}></input>
              <input type="text" value={this.state.input2} placeholder="# in words" onChange={this.handler2}></input>
              <button type="submit">Insert</button>
          </form>
        )
    }
}
export default Form ;

Data.js

export const list = [
    {
      title: "I",
      details: "ONE",
    },
    {
        title: "II",
        details: "TWO",
      },
      {
        title: "III",
        details: "THREE",
      },
  ];

谢谢

Answer 1

您需要传递带有键“title”和“details”的对象。不是 input1 和 input2。所以只需在表格中像这样更新：

const newItem = {
    title: this.state.input1,
    details: this.state.input2,
}
this.props.onsubmit(newItem);

Answer 2

终于找到答案了！

updateList(dataa){
    this.setState(ps=>(
      { listState: [
        dataa,
        ...ps.listState 
      ]}
      )
    )
  }

“App.js”中的“updateList”，有效

react（基于class）：如何在对象从子函数传递到父函数后使用setState更新父组件中的JSON对象？

react (class based) : How can I update JSON object in parent component using setState after the object being passed in function from child to parent?

json

onsubmit

setstate

reactjs

react-class-based-component