react

问题描述

左侧的侧边栏有3个menu菜单，我在mapStatetoProps里进行了处理，使其可以获取到侧边栏数组。在ComponentDidMount里调用函数update，使其显示哪个是高亮的。

矛盾点

在组件运行到componentDidMount中的时候，数组里只有两个元素，所以侧边栏循环出来也是两个元素，我需要显示的是侧边栏有3个元素。

问题解决

Q1:这是React的生命周期问题，sideBars数组里的第三个元素会在componentDidMount之后显示，如果需要显示三个元素，那render里怎么处理？
A1:render 里就不能再用之前的setState了，直接使用this.props.sidebars来循环调用。

Q2:那高亮的3部分切换该怎么办？
由于componentDidMount中只能显示两个元素，那么第三个元素就用componnentDidUpdate或componentWillRecieveProps来调用update函数显示。

Q3:使用ComponentDidUpdate后代码产生了死循环，如何解决？
A3:

Alt text

如图，在update函数中使用setState,触发了componnentDidUpdate,ComponentDidUpdate又调用了update函数，这样就形成了死循环。
解决办法：在update函数中写上if的判断条件，当某个条件成立时，return ,防止死循环。。。

反思

• 对React的生命周期理解不够，对组合使用生命周期函数不熟悉
• 写react写了这么久，但这样的情况还不会处理，感觉自己挺没用的

action

• 不会的问题就记录下来，理解思考，下次不犯同样的错误
• 下次就写demo来练习，吃一堑，长一智