使用标准 Javascript 函数自动响应 setState

Question

ReactJS 上的新手，让我们看看我正在使用的一些代码

<!-- language: lang-js -->
import Oak from './Oak'
class Space extends Component {
  componentWillMount () {  Newstate = Oak(oldState) }
  componentWillUpdate () { }

  render () {
    return()
  }
}

function mapStateToProps (state) { return {bigStateTree: state.bigTree } }
export default connect(mapStateToProps)(Space)
----------
//Oak.js
export default function Oak (inputState = null) {
 dosome 3D dance 
 return bigStateTree
}

在 ctrl 面板 (Space.js) 上使用 ReactJS 和 Redux，在画布 (Oak.js) 上使用一些 3d。
问题是：
我希望从返回值中从 Oak.js 中获取数据，然后重新渲染（再次调用 Newstate = Oak(oldState)）状态中的 3d 基础，当状态更改 3d 更改时，它是 3d 更改状态更改时的循环，没有点击没有变化。

基于 StackOverflow NEVER mutate this.state directly 的建议

我现在不知道该怎么办。

Answer 1

首先在构造函数中你需要设置初始状态。您可以按如下方式执行此操作，其中 yourProperty 是您想要的键，而 defaultValue 是您选择的值：

this.state = { yourProperty: defaultValue }

然后在componentWillMount()中：

this.setState({ yourProperty: Oak(this.state.yourProperty) })

最后在 render() 方法中访问状态：

return (
    <div>{this.state.yourProperty}</div>
    );

唯一可以在没有 setState 方法的情况下为 this.state 赋值的情况是在构造函数中。另请注意，您不能在 render() 方法中更改状态。

阅读 React 组件生命周期会很有用。