我如何将道具传递给来自不同来源的组件？

Question

我有一个组件

<Box/>

我想从不同的来源将道具传递到此数组中。问题是，每次我映射这两个函数并将它们的值传递给组件时，都会使每个源分别渲染组件，从而使组件渲染次数超过我想要的次数。

例如，这就是我的工作

return summaryData.map((item, i) => {
         const { name, number } = item
         return tableData.map((item, i) => {
          const { row, column } = item
            return <Box key={i} name={name} number={number} row={row} column={column}/>
        })
     })

该框呈现了每个函数分别运行的次数，但是我希望两个函数同时运行并将数据传递到框组件中

Answer 1

在您的代码中，我发现您想以相同顺序映射summaryData和tableData的属性，对吗？我认为它们是对象列表。您可以尝试以下方法：

return summaryData.map((item, i) => {
         const { name, number } = item
         return <Box key={i} name={name} number={number} row={tableData[i].row} column={tableData[i].column}/>
        })
     })

希望它起作用。

Answer 2

您可以像下面一样加入两个数组并映射一次。

return summaryData.reduce((acc,{name,number},index) => {
  acc.push({
    name,
    number,
    row: tableData[index].row, //assuming you want value from the same index
    column: tableData[index].column} )
  return acc;
},[])
.map(({name,number,row,column},i) => (<Box key={i} name={name} number={number} row={row} column={column}/>));