0

我的 React 组件中有以下代码：

class TheComponent extends Component{

    constructor(props) {

        super(props);

        this.state = {
            a: '',
            b: ''
        };
    }

    output = (data) => {

        this.setState({
            a: data.a,
            b: data.b
        });
    }

    render(){
        return(<ChildrenComponent outputValues={this.output.bind(this)}/>);
    }
}

当我从同一个组件调用该output方法时，它运行良好，并且状态更改成功。但是当我从我那里调用它时ChildrenComponent它不起作用，并且状态永远不会改变。

所以我在output函数中添加了以下代码，以了解发生了什么：console.log(this.setState). 结果是“setState”函数在那里。

那么，如果函数setState正确绑定到output，为什么它不起作用？为什么它只有在从当前组件调用输出时才有效？`

4

1 回答 1

1

你的代码对我来说看起来不错。我认为你只是对做什么有点困惑setState。setState是一个内置的 React 函数，console.log(this.setState)因此运行将始终记录一个函数，特别是那个函数。

我不确定您如何在子组件中调用您的道具，但下面的示例允许子组件将父状态设置为函数data上方的对象，并将父状态记录到控制台。renderreturn

class TheComponent extends Component{
    constructor(props) {
        super(props);
        this.state = {
            a: '',
            b: ''
        };
     }

     setValues = (data) => {
        this.setState({
            a: data.a,
            b: data.b
        });
      }

     outputValues = () => {
         console.log(this.state);
     }

      render(){
        return (
            <ChildrenComponent set={this.setValues} output={this.outputValues}/>
            <p>{this.state.a}</p>
        );
      }
    }

class ChildrenComponent extends Component{
      render() {
        const data = { a: 'foo', b: 'bar' };
        return (
            <button onClick={() => this.props.set(data)}>change parent state</button>
            <button onClick={this.props.outputValues}>console.log parent state</button>
        );
      }
    }
于 2019-03-25T12:52:36.550 回答