反应：状态不会改变 onClick 和更新组件答案

【问题标题】：React: State won't change onClick and update component反应：状态不会改变 onClick 和更新组件
【发布时间】：2020-09-29 00:41:02
【问题描述】：

我有一个带有状态的父组件来检测用户是否点击了它，并且父组件使用了一个子组件，其中包含一个我想在用户点击父组件时隐藏的项目。

这里是父组件：

class Parent extends Component {
  constructor (props) {
    super(props);
    this.state = {
      clicked: false
    };
  }

  setClick = () => {
    this.setState({clicked: true});
  };

  render() { 
    // ... 
    return (
      <div onClick={this.setClick}>
        <Child isClicked={this.state.clicked} />
      </div>
    )
  }  
}

这是子组件，在我的返回中：

return (
  <div ...>
      {!props.isClicked && ( ... then render the item ... )}
  </div>
)

所以当用户单击我的父组件时，我试图更改clicked 的状态，然后我将clicked 作为道具传递给我的子组件，并且在子组件内有一个项目根据clicked 的状态呈现。现在，如果我单击父组件，则状态不会更改，并且该项目仍会在不应该出现的情况下呈现。有什么问题？

【问题讨论】：

您确认状态没有更新吗？还是只是不重新渲染？（在Parent console.log(this.state) 的render 中。如果它正在更新，问题将出在Child 组件中，我们需要看到更多它的实现。
提供的代码似乎不正确。用于渲染的右花括号应在返回正文结束后结束。子组件也没有正确编写。
我认为我们需要看到更多你的子组件；不包括可以解释无法正常工作的部分。

标签： javascript reactjs

【解决方案1】：

您需要使用this.props.isclicked 访问child 中的道具所以你的子组件应该是这样的

class Child extends React.Component<{isClicked:boolean}>{
    render(){
        return (
            <div>
               {`I am ${this.props.isClicked ? `clicked` : `not clicked` }`}
           </div>
         )
    }
}

【讨论】：