Question

我正在制作一个简单的反应应用程序，用户可以在其中创建列表和项目。我正在努力找出如何将数据从子组件传递到父组件并更新状态。

我将子组件（AddItem）中的输入数据传递给父组件（App）。

// AddItem.js

class AddItem extends Component {

   constructor() {
   super();
   this.state = {
       items: []
   }
   }

   handleSubmit(e) {
       e.preventDefault(); 

       var newItem = {
       name : this.refs.id.value};

       if(this.refs.id.value ===''){
           alert('Add list')
        } else {
           this.setState({
           items: this.state.items.concat(newItem)
           }, function(){
           this.props.addItem(this.state.items);
        });
        console.log(this.state.items) // this print out Array with data
     }
    }
   render() {
   var divName = 'add' + this.props.idName;
   return (
    <div className='addItemDiv'>
        <h4>Add {this.props.idName}</h4>
        <form ref='form' onSubmit={this.handleSubmit.bind(this)}>
        <div id={divName} ref={divName}>
            <label>Name</label><br />
            <input type='text' ref='id' />
        </div>
        <br />
       <input type='submit' value='Submit' />
       <br />
       </form>
    </div>
    );
   }

  }

// App.js

class App extends Component {

 constructor() {
    super();
    this.state = {
       lists: [], 
       items: {} 
     };
  }

 handleAddList(list) {
      let lists = this.state.lists;
      lists.push(list);
      this.setState({
          lists: lists
      })
 }

handleAddItem(item) {
   console.log(this.state.items) // it print out {}. Data is not passed.
   }
render() {
    return (
     <div className="App">

    <AddList addList={this.handleAddList.bind(this)} />
    <div id="listsDiv" className="List">
    <Lists lists={this.state.lists} items={this.state.items} addItem={this.handleAddItem.bind(this)} />
    </div>
    </div>
    );
    }

    }

正如我在评论中添加的那样，AddItem.js中的this.state.items包含数组数据但是当我将它传递给App.js中的父组件时，this.state.items为空。我怀疑在AddItem.js中没有正确调用该函数，并且数据未传递给App.js.

但我自己也无法弄明白。非常感谢您的帮助。

谢谢，

Answer 1

运行时，代码中发现了2个问题。

注意：我注释掉了列表组件。

{/*<div id="listsDiv" className="List">*/}
  {/*<Lists lists={this.state.lists} items={this.state.items} addItem={this.handleAddItem.bind(this)} />*/}
{/*</div>*/}

（1）您没有将道具'addItem'传递给Component AddItem。

<AddList addList={this.handleAddList.bind(this)} addItem={this.handleAddItem.bind(this)}/>

（2）Handle Item正在记录错误的字段。

  handleAddItem(items) {
    console.log(items);
  }

现在，我可以看到值被冒泡到App。

由于 Sriram Narasimhan

Answer 2

函数handleAddList覆盖列表，状态仅包含列表

handleAddList(list) {
      let lists = this.state.lists;
      lists.push(list);
      this.setState(prevState => ({
            ...prevState,
            lists: lists
      }));
 }

在状态更新之前调用函数并将数据传递给父组件/ React.js

2 个答案: