Question

我希望axios部件首先在useEffect内部运行，以便可以先更新状态，然后再使用它。

这是错误：

TypeError: Cannot read property map of undefined

当我控制台显示状态未更新时，它保存着SwitchCOM空数组

这意味着它直接用于return语句，而无需运行useEffect axios部件。

这是我的SwitchCom状态：

SwitchCOM: {
  0: {id: "36", name: "XYZ", progress: "", details: [{id: "36", name: "XYZ", progress: ""}]},
  1: {id: "83", name: "ABC", progress: "",  details: [{id: "36", name: "XYZ", progress: ""}]},
  2: {id: "77", name: "EFG", progress: "",  details: [{id: "36", name: "XYZ", progress: "" }]}
}

const initialState = {
    SwitchCOM: [],
    isFetching: false,
    hasError: false
}

{states.SwitchCOM.map(topis => (
  <div className="item" key={topis.id}>
    <p>{topis.name}</p>
    <p>
      <progress id="file" value="32" max="100">
        {topis.progress}
      </progress>
    </p>
    {topis.activities.map(activity => (
      <table key={activity.id}>
        <tbody>
          <tr>
            <td>Name</td>
            <td>Progress</td>
            <td>Status</td>
          </tr>
          <tr >
            <td>{activity.name}</td>
            <td>{activity.prog}</td>
          </tr>
        </tbody>
      </table>
    ))}
  </div>
))}

Answer 1

您正在尝试映射不起作用的对象。相反，您需要使用Object.keys(...)在这里完成您想要的工作。

您应该执行以下操作：

{Object.keys(states.SwitchCOM).map(key => (
  <div className="item" key={states.SwitchCOM[key].id}>
    <p>{states.SwitchCOM[key].name}</p>
    <p>
      <progress id="file" value="32" max="100">
        {states.SwitchCOM[key].progress}
      </progress>
    </p>
    {states.SwitchCOM[key].details.map(detail => (
      <table key={detail.id}>
        <tbody>
          <tr>
            <td>Name</td>
            <td>Progress</td>
          </tr>
          <tr>
            <td>{detail.name}</td>
            <td>{detail.progress}</td>
          </tr>
        </tbody>
      </table>
    ))}
  </div>
))}

如何在Reactjs中的map函数内部运行map

1 个答案: