如何将 props 传递给来自不同来源的组件？

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) => {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;const { name, number } = item&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;return <Box key={i} name={name} number={number} row={tableData[i].row} column={tableData[i].column}/>&nbsp; &nbsp; &nbsp; &nbsp; })&nbsp; &nbsp; &nbsp;})希望它有效。

Answer 2

您可以像下面这样连接两个数组并映射一次。return summaryData.reduce((acc,{name,number},index) => {&nbsp; acc.push({&nbsp; &nbsp; name,&nbsp; &nbsp; number,&nbsp; &nbsp; row: tableData[index].row, //assuming you want value from the same index&nbsp; &nbsp; column: tableData[index].column} )&nbsp; return acc;},[]).map(({name,number,row,column},i) => (<Box key={i} name={name} number={number} row={row} column={column}/>));