Итак, я пытаюсь добавить некоторые данные в два разных массива в реагирующем машинописном тексте.
const [deviceNames, setDeviceNames] = useState<Array<string>>([])
const [serialNumbers, setSerialNumbers] = useState<Array<string>>([])
Теперь я перебираю как массив здесь, так и отображаю содержимое
{deviceNames.length > 0 &&
serialNumbers.length > 0 &&
deviceNames.map(deviceName => {
return serialNumbers.map(serialNumber => {
return (
<CardDevice
deviceName={deviceName}
serialNumber={serialNumber}
/>
)
})
})}
Я добавляю данные в этот массив, нажимая кнопку, а затем показывая модальный режим, а затем вот так
onSubmit = (values: any) => {
clearError()
setAddDevice(false)
setDeviceNames(deviceName => [...deviceName, values.deviceName])
setSerialNumbers(serialNumber => [...serialNumber, values.serialNumber])
}
Я использую форму реактивного хука. Итак, что я хочу, так это всякий раз, когда я перебираю оба массива, каждый раз, когда он должен отображать содержимое, которое только что было добавлено в массив, новый, а не последний, который уже был добавлен и отображен. Я надеюсь, что я в состоянии сделать некоторые точки здесь. Он выполняет свою работу, но всякий раз, когда пользователь вводит новое устройство после добавления одного, он снова добавляет старое, затем новое, а затем снова и снова то же самое. я просто хочу отобразить только один новый элемент, который был только что добавлен пользователем в массив.
Спасибо