Javascript 如何在子组件中获取后端数据，然后从存储中检索对象？

我的父组件

构建子组件

，当父组件构建这些子组件时，我还将其发送到

uuid，通过该uuid我从后端获取传感器数据

存储是对象的数组

//父对象
返回道具.传感器.地图（（uuid，索引）=>{
返回
})

//子对象
const RoomSensor=props=>{
useffect（（）=>{
console.log（“useffect”）
props.fetchSensor（props.uuid）
}，[props.uuid]）
控制台日志（道具传感器）
返回(
{props.sensor.value}
)
}
让mapStateToProps=（状态，道具）=>{
返回{
传感器：过滤器传感器（状态，道具uuid）
}
}
让mapDispatchToProps={
传感器，
}
导出默认连接（mapStateToProps、mapDispatchToProps）（RoomSensor）

//选择器
导出常量getSensor=（状态，uuid）=>{
返回过滤器（state.sensors，[“uuid”，uuid]）[0]
}
导出常量过滤器传感器=创建选择器(
getSensor，
（传感器）=>传感器
)

我不能理解两件事：

当我刷新时，我得到了

TypeError:无法读取未定义的属性“uuid”

我知道州里还没有数据，这就是为什么会发生这样的错误。在数据来自服务器之前，是否可以不呈现组件

如果我注释

{props.sensor.value}

没有错误发生，数据出现在存储中，那么我取消注释这一行，瞧，一切正常。但在控制台中，我看到太多的组件重新加载。我做错了什么？选择器有问题吗？

---

通常，我希望每个传感器组件独立于其他组件进行渲染。

以下是基于从共享代码和输出导出的一些假设：

目前，有4个传感器UUID的硬编码列表

createSelector

来自

reselect

包

\uu

引用了

lodash

包的导入

---

“在数据来自服务器之前，是否可以不呈现组件？”

对此的简短回答是肯定的。有几种方法可以实现这一点，因此您需要评估什么最适合应用程序的结构。这里有两种方法可供考虑：

从服务器检索传感器列表。使用空列表初始化存储，并在从服务器返回数据时填充它

在

getSensor

中，如果uuid不在列表中，则返回默认值

无论哪种方式，我都建议将默认状态添加到存储中。这将有助于减少处理边缘情况所需的代码量

下面是（1）的新减速器和选择器的大致示例：

export const storeReducer = (state, action) => {
  let nextState = state;
  if (!state) {
    // State is uninitialized, so give it a default value
    nextState = {
      sensors: [],
    };
  }

  switch (action.type) {
    case 'RECEIVE_SENSORS':
      // We received sensor data, so update the value in the store
      nextState = {
        ...nextState,
        sensors: action.sensors,
      };
      break;
    default:
      break;
  }

  return nextState;
};

export const getSensors(state) {
  return state.sensors;
}

从服务器接收数据时的操作可能类似于：

dispatch({
  sensors,
  type: 'RECEIVE_SENSORS',
})

const existingData = getSensor(getState(), uuid);
const newData = fetch(...);
// Only update the store if there's new data or there's a change
if (!existingData || !_.isEqual(newData, existingData)) {
  dispatch(...);
}

---

“…在控制台中，我看到太多的组件重新加载”

如果没有额外的上下文，很难说重新渲染发生的确切原因，但最可能的原因是每次调用

props.fetchSensor（props.uuid）

都会更改存储中的数据（例如，如果它正在覆盖数据）

从您共享的控制台输出中，我们看到有16个重新渲染，这是因为：

RoomSensor

调用

fetchSensor

这将导致商店状态的4次更新

商店状态的每次更新都会导致React评估

RoomSensor

的每个实例以重新渲染

因此，4个状态更新x 4个评估组件=16个重新渲染

React非常有效，如果组件返回与上一次运行相同的值，它就知道不更新DOM。因此，性能影响实际上可能并没有那么大

也就是说，如果上述理论是正确的，并且您希望减少重新渲染的次数，一种方法是检查从服务器返回的数据是否与存储中已有的数据相同，如果是，则跳过更新存储

例如，

fetchSensor

可能会更新如下内容：

dispatch({
  sensors,
  type: 'RECEIVE_SENSORS',
})

const existingData = getSensor(getState(), uuid);
const newData = fetch(...);
// Only update the store if there's new data or there's a change
if (!existingData || !_.isEqual(newData, existingData)) {
  dispatch(...);
}

如果在传感器列表中未找到uuid，则需要更新

getSensor

以返回错误值（例如

null

）

---

一个附加提示

在

Room

中，

RoomSensor

根据项目在数组中的索引，使用其

键

进行渲染。由于

uuid

应该是唯一的，因此可以将其用作

键（即
）。这将允许仅在uuid上对
RoomSensor
的基本更新做出反应，而不考虑列表的顺序

以下是基于共享代码和输出得出的一些假设：

目前，有4个传感器UUID的硬编码列表
createSelector
来自
reselect
包
\uu
引用了
lodash
包的导入

“在数据来自服务器之前，是否可以不呈现组件？”

对此的简短回答是肯定的。有几种方法可以实现这一点，因此您需要评估什么最适合应用程序的结构。这里有两种方法可供考虑：

从服务器检索传感器列表。使用空列表初始化存储，并在从服务器返回数据时填充它
在
getSensor
中，如果uuid不在列表中，则返回默认值
无论哪种方式，我都建议将默认状态添加到存储中。这将有助于减少处理边缘情况所需的代码量

下面是（1）的新减速器和选择器的大致示例：

export const storeReducer = (state, action) => {
  let nextState = state;
  if (!state) {
    // State is uninitialized, so give it a default value
    nextState = {
      sensors: [],
    };
  }

  switch (action.type) {
    case 'RECEIVE_SENSORS':
      // We received sensor data, so update the value in the store
      nextState = {
        ...nextState,
        sensors: action.sensors,
      };
      break;
    default:
      break;
  }

  return nextState;
};

export const getSensors(state) {
  return state.sensors;
}

接收数据时的操作