Использование array.map и onchange в React
Приведенный ниже код содержит функцию array.map, какова функция term и i, и откуда она была взята, и что делают array.map и onchange.
import React, { Component } from 'react';
class Apps extends Component {
componentDidMount() {
}
iLikeFunctions() {
console.info('yay functions');
}
render() {
var array = ['here','we','go'];
var no = 'yes';
const display = 'My Name';
return (
<div>
<p>{display}</p>
<hr />
<input type = "text" onChange = {this.iLikeFunctions} />
<table>
<tbody>
{array.map((term,i) => {
no = 'no';
return (
<tr key = {i}>
<td>{term}</td>
<td>{no}</td>
</tr>
)
})}
</tbody>
</table>
</div>
);
}
}
export default Apps;
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Карта:
Метод map() создает новый массив с результатами вызова предоставленной функции для каждого элемента в вызывающем массиве. Итак, в следующей строке:
array.map((term,i)
Вы сопоставляете массив с именем array и просматриваете его в цикле, присваивая слово term каждому значению в массиве и возвращая элемент tr для каждого элемента массива с их соответствующим значением, индексом и строкой переменных, напечатанных на <tr>.
Ключ:
i - это индекс соответствующего значения, которое действует как ключ, поскольку вы не указали уникальные идентификаторы ключей для элементов.
«Ключ» - это специальный строковый атрибут, который необходимо включать при создании списков элементов. Ключи помогают React определить, какие элементы были изменены, добавлены или удалены.
Обратите внимание, что не рекомендуется использовать индексы для ключей, если порядок элементов может измениться. Это может отрицательно сказаться на производительности и вызвать проблемы с состоянием компонентов.
Ознакомьтесь с разделом keys в официальном React Docs для более подробного объяснения ключей.
по изменению:
onchange следит за полем ввода на предмет любых изменений и при обнаружении изменения запускает iLikeFunctions().
tldr: Приведенный выше код проходит через массив ['here','we','go']; и возвращает <tr> для каждого значения. Он также запускает iLikeFunctions() при изменении значения поля ввода.
Пожалуйста, что делает ключ в <tr key = {i}> @AndrewL