时间戳

首页 > 解决方案 > 在 ReactJS 中设置状态时如何渲染子组件或并行组件？

reactjs - 在 ReactJS 中设置状态时如何渲染子组件或并行组件？

问题描述

设置状态时如何渲染子组件或并行组件？

主要组件包含以下代码

editValue(data) {
  console.log("edited")
  this.setState({ edits:data }, function() {
    console.log("edited value...")
  })
}
render() {
  return(
    <div>
      <TextComponent edit={this.editValue.bind(this)}/>  
      <AreaComponent editedValue = {this.state.edits}/> 
    </div>
  )
}

文本组件：

trigger = (data) => {
  this.props.edit(data)
}

render() {
  return (
    <div>
      <p onClick={this.trigger.bind(this,'clicked')}>Click</p>
    </div>
  )
}

区域组件：

componentDidUpdate() {
    console.log("update - component")
}

componentWillReceiveProps(nextProps){
    console.log('receive - component');
}

在这里，当我单击时，<p>我的控制台如下

edited
receive - component
update - component
edited value...

我的问题是我在 state 中设置的编辑值没有反映在我的AreaComponent. 所有的componentDidUpdate()andcomponentWillReceiveProps()在设置状态之前被触发。我想在下一个组件中获取状态值。我应该在此代码中做哪些更改？

标签： reactjs

解决方案

嘿，我测试了您的代码，它按您的预期运行。

这是给你的沙箱：https ://codesandbox.io/s/7yry1onrq6

为了让您在单击后看到更改，TextComponent只需editedValue使用AreaComponent.

这是一个镜像您的代码的示例：

class AreaComponent extends React.Component {
  componentDidUpdate() {
    console.log("update - component");
  }

  componentWillReceiveProps(nextProps) {
    console.log("receive - component");
  }
  render() {
    return <p>{this.props.editedValue}</p>;
  }
}

在上面的示例中editedValue，单击后正确更改。

推荐阅读