Question

在我的React应用程序中，我有组件结构： -AllElements --SingleElement --SingleElementDetails

我正在将方法See传递给SingleElement组件，我调用seefunc来调用AllElements组件中的see方法。问题我AllElements中的状态（名称）在第一次onClick触发后没有改变，它在secund click后发生变化。你能告诉我为什么吗？

    class AllElements extends Component {

        constructor(props) {
            super(props);
            this.state = {
                myData: [],
                viewingElement: {
                    name:""
                }
            }
             this.see = this.see.bind(this);
            console.log('Initial Sate',this.state.viewingElement);
        }


         see(name) {
        this.setState({
          viewingElement: {
            name:name
          }
        });
        console.log('State after SEE',this.state.viewingElement);
      }

        render() {
            const { myData, viewingElement } = this.state;
        return (
          <div>
            {myData.map(se => (
              <SingleElement
                key={se.id}
                name={se.name}
                see={this.see}
              />
            ))}
              <SingleElementDetails viewingElement={viewingElement}/>
          </div>
        );
        }
    }



    class SingleElement extends Component {
    constructor(props) {
        super(props);
    }

    seefunc(name) {
        this.props.see(this.props.name);
        console.log('Name in seefunc props',this.props.name);
    }

    render() {
        return (
            <div onClick={this.seefunc.bind(this)}>
                DIV CONTENT
            </div>
        )
    }
}

Answer 1

您遇到的问题是setState是异步的。它确实是第一次运行，但您在console.log中没有看到它，因为console.log在状态更新之前发生。

要查看更新后的状态，请使用setState的第二个参数，它是一个回调函数（https://reactjs.org/docs/react-component.html#setstate）：

 this.setState({
          viewingElement: {
            name:name
          }
        }, () => {
  console.log('State after SEE',this.state.viewingElement);
});

在SingleElement中使用反应生命周期中的componentWillReceiveProps(nextprops)（https://reactjs.org/docs/react-component.html#componentwillreceiveprops）方法查看更新的道具：

seefunc(name) {
        this.props.see(this.props.name);
    }

componentWillReceiveProps(nextprops) {
        console.log('Name in props',nextProps.name);
}

Answer 2

更改。但是setState是一个异步过程，因此您只需将之前的状态记录到控制台。 setState does provide a callback允许您在异步过程完成后运行代码，因此您可以这样做：

this.setState({
  viewingElement: {
    name:name
  }
}, () => console.log('State after SEE',this.state.viewingElement));

<强> DEMO

在第一次方法触发后，React不会改变状态

2 个答案: