Question

我正在尝试在react中添加一个组件，该组件将根据其属性从websockets（已经正常工作）获取更新：

<div><Temperature room='livingroom'/></div>
<div><Temperature room='cellar'/></div>

仅应对具有room属性的组件进行更新，该属性已通过mapStateToProps映射：

  function mapStateToProps(state, ownProps){
     if (ownProps.room == state.dataReducer.room_name){
        return { temp: state.dataReducer.temp,
                 room_name: state.dataReducer.room_name}
               }
  }

export default connect(mapStateToProps)(TOB);

组件定义：

    const Temperature = ({room_name, temp}) => (
       <ul> {temp} </ul>
    );

现在，我得到的每个更新（都可能异步发生）是一个组件为空白，而另一个组件填充的温度正确，因此在频繁更新时它会闪烁。

您是否知道如何通过属性正确且有效地进行此更新？

Answer 1

您的mapState函数应该始终返回此组件所需的数据，而不管调度了什么动作或如何更新商店。然后，React-Redux将检查该组件的数据自上次以来是否确实发生了更改，并且仅在数据更改后才重新呈现。

现在，您的mapState函数仅返回 some 时间的数据。您应该重写它，以使Temperature的每个实例始终从存储中提取所需的任何数据。

（附带说明：don't name state slices as "state.somethingReducer". Name them after the data that's contained inside。）

Answer 2

您应该在Temperature组件上使用shouldComponentUpdate来决定是否要渲染它。仅当返回值评估为true时，组件才会呈现

shouldComponentUpdate(nextProps) {
  return nextProps.room === nextProps.room_name;
}

function mapStateToProps(state){
  return 
    { temp: state.dataReducer.temp,
      room_name: state.dataReducer.room_name
  }
}

export default connect(mapStateToProps)(TOB);

React / Redux mapStateToProps通过ownProps

2 个答案: