Как добавить набор ключей значений в словари внутри списка внутри словаря

#reactjs #dictionary

Вопрос:

Я учусь использовать ReactJS, но я не понимаю, как я мог бы добавить ключ значение в набор словарей, содержащихся в самом списке, содержащемся в словаре …?

вот эти данные :

 export const datasTest = {
  labels: ["1", "2", "3", "4", "5", "6"],
  datasets: [
    {
      label: "# of Red Votes",
      data: [12, 19, 3, 5, 2, 3],
    },
    {
      label: "# of Blue Votes",
      data: [2, 3, 20, 5, 1, 4],
    },
    {
      label: "# of Green Votes",
      data: [3, 10, 13, 15, 22, 30],
    },
  ],
};

Поэтому я хотел бы получить это :

 export const datasTest = {
  labels: ["1", "2", "3", "4", "5", "6"],
  datasets: [
    {
      label: "# of Red Votes",
      data: [12, 19, 3, 5, 2, 3],
      backgroundColor: "#c4b02e",
    },
    {
      label: "# of Blue Votes",
      data: [2, 3, 20, 5, 1, 4],
      backgroundColor: "#f3bf1d",
    },
    {
      label: "# of Green Votes",
      data: [3, 10, 13, 15, 22, 30],
      backgroundColor: "#fb601f",
    },
  ],
};

Я добавил «Цвет фона:» #fb601f «» (от руки :))

 export const colorForLabel = [
  { label: "# of Red Votes", colour: "#c4b02e" },
  { label: "# of Blue Votes", colour: "#f3bf1d" },
  { label: "# of Green Votes", colour: "#fb601f" },
];

Я написал это, но я застрял, я не знаю, как добавить мои новые ценности :

   const [data, setDatas] = useState(
    CscDataService.getDatas()
  );

  function setColor() {
    {
      Object.entries(data["datasets"]).map(([key, values]) => {
        Object.entries(values).map(([key, value]) => {
          console.log(key   " "   value);
        });
      });
    }
  }

Не могли бы вы мне помочь ? Спасибо

Ответ №1:

Что-то вроде этого ?

 function setColor() {
  const updatedDatasets = data.datasets.map(dataset => {
    const { colour } = colorForLabel.find(({ label }) => label === dataset.label) || {};
    
    return {
      ...dataset,
      backgroundColor:colour 
    }
  });
  
  setDatas(currentData => ({
    ...curentData,
    datasets: updatedDatasets
  }));
}
};

Ответ №2:

Вы можете использовать обновление функционального состояния, чтобы получить доступ к предыдущему состоянию и добавить цвет фона к каждому объекту, например:

 export const colorForLabel = [
  { label: "# of Red Votes", colour: "#c4b02e" },
  { label: "# of Blue Votes", colour: "#f3bf1d" },
  { label: "# of Green Votes", colour: "#fb601f" },
];

function setColor() {
    setDatas((prevData) => {
        return {
            ...prevData,
            datasets: prevData.datasets.map(dataset => ({...dataset, backgroundColor: colorForLabel.find(({label}) => label === dataset.label).colour}))
        }
    })
}