Question

我有一个简单的页面，它的功能很多，但是我将其简化为问题代码。我正在从Cloud Firestore提取数据。我有一个表示对象序列的数据集合。另一个集合是对象本身：

import React, { useState } from "react";

const App = () => {
  const boardSequence = ["boardid2", "boardid1"];
  const boardData = [
    {
      boardid1: {
        boardValue: "Sales",
        boardColor: "#003c8a",
        boardDifference: "#FFFFFF"
      }
    },
    {
      boardid2: {
        boardValue: "Follow Ups",
        boardColor: "#000000",
        boardDifference: "#FFFFFF"
      }
    }
  ];

  const [boards] = useState(boardData);
  const [sequence] = useState(boardSequence);
  return (
    <div>
      {sequence.map((boardId, index) => {
        return <p key={index}>{boards[boardId].boardValue}</p>;
      })}
    </div>
  );
};
export default App;

我首先通过序列数组进行映射，然后尝试显示板数组中的值，但会出错

无法读取未定义的属性“ boardValue”

编辑：这是我用来获取数据的代码。看起来真正的问题是，如何将其从数组中分解为一个可读的对象？

    const promise1 = appBase.firestore().collection("workflow").get();
    const promise2 = appBase.firestore().collection("boards").get();

    Promise.all([promise1, promise2])
      .then((snapshot) => {
        // console.log(snapshot[0].docs.data().boardIds);
        const newBoardIds = snapshot[0].docs.map((doc) => {
          return doc.data().boardIds;
        });
        setBoardIds(newBoardIds[0]);

        const newBoards = snapshot[1].docs.map((doc) => {
          return {
            [doc.id]: {
              boardValue: doc.data().boardValue,
              boardColor: doc.data().boardColor,
              boardDifference: doc.data().boardDifference,
            },
          };
        });

        console.log(newBoards);
        setBoards(newBoards);
        // setSettings({ ...settings, dataLoaded: true });
        setDataLoaded(true);
      })
      .catch((error) => {
        console.log("error returned on boards: " + error);
      });

Answer 1

在这里

{sequence.map((boardId, index) => {
  return <p key={index}>{boards[boardId].boardValue}</p>;
})}

boards是一个数组，因此寻找整数索引。如果您想通过按键查找，则您的数据应采用这种格式，

const boardData = {
    boardid1: {
      boardValue: "Sales",
      boardColor: "#003c8a",
      boardDifference: "#FFFFFF",
    },
    boardid2: {
      boardValue: "Follow Ups",
      boardColor: "#000000",
      boardDifference: "#FFFFFF",
    },
};

Answer 2

您应该将boardData从数组转换为对象。在演示中，我使用reduce来实现

const [boards] = useState(
  boardData.reduce((acc, obj) => ({ ...acc, ...obj }), {})
);

Codesandbox演示

Answer 3

您正在遍历字符串的序列数组；我认为您想遍历董事会；这是一组对象。像这样：

import React, { useState } from "react";

const App = () => {
  const boardSequence = ["boardid2", "boardid1"];
  const boardData = [
    {
      boardid1: {
        boardValue: "Sales",
        boardColor: "#003c8a",
        boardDifference: "#FFFFFF"
      }
    },
    {
      boardid2: {
        boardValue: "Follow Ups",
        boardColor: "#000000",
        boardDifference: "#FFFFFF"
      }
    }
  ];

  const [boards] = useState(boardData);
  const [sequence] = useState(boardSequence);
  return (
    <div>
      {boards.map((boardId, index) => {
        return <p key={index}>{boards[boardId].boardValue}</p>;
      })}
    </div>
  );
};
export default App;

useState似乎无法正确映射数组

3 个答案: