setState 函数不适用于子组件

Question

我的 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，为什么它不起作用？为什么它仅在从当前组件调用输出时才起作用？`

Answer 1

我觉得你的代码很不错。我认为您只是对 setState 的作用有点困惑。 setState 是一个内置的 React 函数，因此运行 console.log(this.setState) 将始终记录一个函数，特别是那个函数。

我不确定你是如何在子组件中调用你的 prop 的，但下面的例子允许子组件将父级状态设置为 render 函数上方的 data 对象return 以及将父状态记录到控制台。

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>
        );
      }
    }

setState 函数不适用于子组件

setState function not working on child component

javascript

reactjs

react-tsx