在对象 React/Javascript 中映射数组

Question

我很难使用地图功能。这就是我所做的......我将数据作为道具从我的父组件传递到子组件。 {open, high, low, close, time } 是包含 1,445 个数据集的数组，因此每个道具的内容都包含大量数据。我将使用所有 5 个数组的数据，因此我将它们存储在 conglomerate 对象中。

请将您的注意力转移到const chartRender 如您所见，我做的不对。由于我将 {open, high, low, close, and time} 存储在 conglomerate 对象中，所以当我执行 .map 方法时，它只呈现 5 个数组，可能是因为 conglomerate 数组中有 5 个数组。

function QuoteChart(props) {
    const classes = useStyles();
    const { open, high, low, close, time } = props;
    const conglomerate = [open, high, low, close, time];
    console.log(conglomerate);

    const chartRender = conglomerate.map((options) => ({
        x: new Date(options[4]),
        y: [options[3], options[1], options[2], options[0]],
    }));
    console.log(chartRender)};

目标是将数据存储在conglomerate 中，然后将{open, high, low, close, time} 中每个数组内的1,445 个数据集映射到映射函数

附加上下文：当我console.log(conglomerate) 我想将conglomerate 对象中的每个数组分配给chartRender 函数时，会出现以下内容。

正如你所看到的，当我console.log(chartRender) 时，这就是出现的情况，有些东西坏了。如果你们能帮帮我，我真的很高兴。

Answer 1

如果您打算连接存储在conglomerate 中的数组并在将它们返回给chartRender 之前对其进行操作，这应该会有所帮助。

const chartRender = conglomerate.reduce((accumulator, nestedArray) => {
  // do some operation on nestedArray
  const newArray = nestedArray.map(value => ({ x: value, y: value/2 }))
  accumulator = accumulator.concat(newArray);
  return accumulator;
}, []);

Answer 2

如果您需要将它们分开，您可以使用两次 map：

conglomerate.map((array)=>{  //this iterates through the 5 arrays in conglomerate
  return array.map((options)=>{ //this iterates through the data in the arrays
    return {
      x: new Date(options),
      y: [options, options[1], options[2], options[0]],
    }
  })
 })

如果您不需要将它们分开并且只想要一个包含所有数据的大数组，您可以在开始时将它们连接起来然后映射：

const conglomerate = [...open, ...high, ...low, ...close, ...time];