在道具中提供新数据后的条件渲染

Question

我正在尝试仅在道具可用时呈现特定代码段。我有点新的反应，所以我一直在努力解决这个问题。

我有侧栏，它会呈现一个如下所示的列表：

    renderList(){
    if(!this.props.graph.visibility){
      return <div></div>
    }else{
      this.props.graph.map((list) =>{
        <div>list.name</div>
      })
    }
  }
  <sideBar>
    {this.renderList()}
  </sideBar>

但是我注意到的是，最初this.props.graph是空的，虽然它只存在于我的道具列表中时，只有当我从另一个组件触发一个动作时才会收到来自{{1的新数据}}

以下是行动前后的表现。

在：

在：

动作：

this.props.graph

减速机：

    export const SAVE_GRAPH = 'SAVE_GRAPH';
export const CHECK_GRAPH = 'CHECK_GRAPH';

export function saveGraph(graphTitle,firstMetric,secondMetric,graphType, graphCat) {
    return {
      type: SAVE_GRAPH,
      payload: {
        graphTitle, firstMetric,secondMetric,graphType,graphCat
      }
    }
}
export function checkGraph(visibility){
  return{
    type: CHECK_GRAPH,
    visibility:visibility
  }
}

我怎么能解决这个问题？

Answer 1

初始化时你的状态为空。

export default function saveGraph(state = {}, action) {

关键方面是state = {}。

初始化状态时，

可见性不作为属性存在。 解决方案是...state = {visibility: false}...

或者，您可以在函数上方定义initialState。

const initialState = {
    // this is the default value that will be supplied when the application is initialized
    visibility: false
};

export default function saveGraph(state = initialState, action) {
    // ...
}

来自redux文档：

  

Redux将首次使用未定义状态调用我们的reducer。这是我们返回应用程序初始状态的机会

Answer 2

确保此组件是Class，并包含生命周期方法componentWillReceiveProps。该方法采用newProps的参数。

Answer 3

您可以使用initialState：

constInitialState = { visibility: false }

export default function saveGraph(state = initialState, action) {...}