Question

我不知道我哪里做错了。我无法将数据从孩子发送到父母。这有什么不对？我如何从孩子那里抓住州并送到父州？

这是子组件

import React from 'react';

export class Child extends React.Component{
  constructor(props) {
    super(props);
    this.state= {
      counter2: 5
    }
  }

  render() {
    return(
      <div>
        <button onClick={this.props.data}>Click me</button><span>{this.state.counter2}</span>
      </div>
    );
  }
}

export default Child;

我想更新父组件中的状态

import React from 'react';
import {Child} from './Child';

export default class Parent extends React.Component{
  constructor(props){
    super(props);
    this.state= {
      counter: 0
    }
  }

  update(){
    this.setState({
      counter: this.props.state.counter2
    });
  }

  render(){
    return(
      <div>
        <span>{this.state.counter}</span>
        <Child data={this.update.bind(this)}/>
      </div>
    );
  }
}

但我有一个错误： × TypeError：无法读取undefined的属性'counter'？

我无法理解我做错了什么！

谢谢

Answer 1

实际上，您父母的state中没有props属性。你不能以这种方式获得孩子的状态：

this.props.state.counter2

道具仅从父组件传递到子组件（如果您不使用Redux或其他状态管理库）。

尽管如此，你可以这样传递：

父组件

import React from 'react';
import {Child} from './Child';

export default class Parent extends React.Component{
  constructor(props){
    super(props);
    this.state= {
      counter: 0
    }
  }

  update(value){
    return () => {
       this.setState({
         counter: value
       });
    }
  }

  render(){
    return(
      <div>
        <span>{this.state.counter}</span>
        <Child data={this.update.bind(this)}/>
      </div>
    );
  }
}

子组件

import React from 'react';

export class Child extends React.Component{
  constructor(props) {
    super(props);
    this.state= {
      counter2: 5
    }
  }

  render() {
    return(
      <div>
        <button onClick={this.props.data(this.state.counter2)}>Click me</button><span>{this.state.counter2}</span>
      </div>
    );
  }
}

export default Child;

Answer 2

您没有正确地在子组件中传递content2状态

您需要使用按钮

传递它

 <button onClick={()=> this.props.data(this.state.counter2)}>Click me</button><span>{this.state.counter2}</span>

然后在你的更新功能

  update = (data) =>{
    this.setState({
      counter: data
    });
  }

注意：如果使用箭头功能，则无需绑定更新功能像我一样。

  <div>
    <span>{this.state.counter}</span>
    <Child data={this.update)}/>
  </div>

将数据从子节点发送到父节点React

2 个答案: