传值问题

Question

父组件通过props向子组件传值。在子组件中，对值进行编辑，并且实时地更新dom。

因为在子组件中，props是只读的，所以需要将props中的值赋值给子组件的state，通过对子组件的state的编辑，来更新dom。

但是，在props赋值给state时，遇到了报错：Maximum call stack size exeeded.

这个报错原因大概是，使用生命周期钩子, setState()，出现了死循环。

嗯……我该怎么做呢……？

//因为componentWillMount传值，只会在子组件实例化过程中调用一次，在子组件存在时，并不会调用。
//为了在子组件已存在、父组件切换currentPro时，子组件也能将pros赋值给state，使用了componentWillUpdate
componentWillUpdate = () => {
    const currentPro = this.props.currentPro;
    this.setState({
        currentPro: currentPro
    })
}

Answer 1

Parry 2017-07-07 21:31:04

componentWillUpdate 中 设置 state 会导致内存溢出。

https://facebook.github.io/react/docs/react-component.html#componentwillmount

官方文档里有说：

This is the only lifecycle hook called on server rendering. Generally, we recommend using the constructor() instead.

所以你可以在 constructor 接受参数并设置 state。

或者在生命周期的 shouldComponentUpdate 中设置。

https://facebook.github.io/react/docs/react-component.html#shouldcomponentupdate

• 提问者 慕前端5111728 #1

  老师，在shouldComponentUpdate中setState，我试过了，虽然不会出现内存溢出，但是this.props.currentPro并不是当前的值，而是上一个状态的值

• 提问者 慕前端5111728 #2

  而在constructor中设置，也是只能在子组件实例化时执行一次，在子组件存在期间，并不会执行

• Parry 回复 提问者 慕前端5111728 #3

  那就直接使用 this.props.currentPro 啊，为什么要转存一次，整体逻辑我看不到，不过即使转存也应该是可以存储下来的。

点开查看后面3条评论

Answer 2

Parry 2017-07-07 14:33:47

可否贴一段代码我帮你看下，赋值应该不会出现死循环。

• 提问者 慕前端5111728 #1

  老师，部分代码已经贴出来了，帮我看看该怎么解决吧