Как я могу передать реквизит для компонентов из разных источников?

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}/>));