Реагировать: .map - это не функция
Так что я довольно новичок в реакции, и большую часть моего обучения я получил, наблюдая за учебником. Итак, на этом этапе я отвлекся от своего инструктора и начал реализовывать его, используя свое собственное понимание, а затем я получил следующую ошибку
React: .map is not a function
Вот код
render() {
let person = null;
if (this.state.showPerson) {
person= (
<div>
{
this.state.person.map((el, index) => {
return <Person
key = {el.id}
click = {this.deletePersonHandler.bind(index)}
name = {el.name}
age = {el.age}
changed = {(event) => this.eventSwitchHandler(event, el.id)} />
})
}
</div>
);
}
return (
Ошибка произошла после того, как я реализовал eventSwitchHandler, вот мой код обработчика переключателя
eventSwitchHandler = (event, id) => {
const personInput = this.state.person.find(checkID);
function checkID (passedID) {
return passedID.id === id
}
console.info("newP")
const newP = {...personInput}
console.info(newP)
newP.name = event.target.value
console.info(personInput)
this.setState ({person: newP})
}
[Обновлено] Вот состояние
state = {
person: [
{id: "name1n", name: "Rohit", age: 24},
{id: "name2l", name: "Hariom", age: 23},
{id: "name3g", name: "Vaibhav", age: 58}
],
someOtherState: "Untouched state",
showPerson: false
}
[Обновить] Вот мой код инструктора. Его обработчик изменения имени совпадает с моим eventSwitchHandler.
Опять же, мой первый вопрос был бы в том, почему возникает ошибка .map is not a function, и во время работы с console.infoging я заметил кое-что, что для меня довольно редко, для чего я прикрепил снимок экрана (почему кажется, что имя в обоих местах разное?)
Человек - это массив, только что обновил мой вопрос. Все работало нормально, пока я не использовал eventSwitchHandler
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 4
Ваш человек выглядит как объект javascript, а не массив, который предоставляет функцию карты.
Вы можете ознакомиться с остальной информацией в документации здесь: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map
Человек - это массив, только что обновил мой вопрос. Все работало нормально, пока я не использовал eventSwitchHandler
Нет, человек выглядит как объект. Обратите внимание на разницу в декларациях между человеком и людьми.
Чтобы перебрать объект методом .map, используя Object.keys (), который возвращает множество ключей данного объекта:
Object.keys(this.state.person).map((key, index) => {
console.info(this.state.person[key]);
})
Обновлять
Вы сделали разные вещи со своим кодом инструктора:
eventSwitchHandler = (event, id) => {
const personInput = this.state.person.find(checkID);
function checkID (passedID) {
return passedID.id === id
}
const newP = {...personInput} // **** newP is an object. ****
newP.name = event.target.value
// What you missed:
// let person = this.state.person;
// person[personInput] = newP;
// this.setState ({person: person});
this.setState ({person: newP}) // **** now person becomes object, not an array any more. ****
}
Человек - это массив, только что обновил мой вопрос. Все работало нормально, пока я не использовал eventSwitchHandler
@RahulPatel, мы находим проблему.
Вы неправильно обновляете состояние в eventSwitchHandler
eventSwitchHandler = (event, id) => {
const personInput = this.state.person.find(checkID);
function checkID (passedID) {
return passedID.id === id
}
console.info("newP")
const newP = {...personInput} // newP is an object here
console.info(newP)
newP.name = event.target.value
console.info(personInput)
this.setState ({person: newP}) // overwriting person array with object
}
Вы бы изменили это на
eventSwitchHandler = (event, id) => {
const personInputIndex = this.state.person.findIndex(checkID);
function checkID (passedID) {
return passedID.id === id
}
const newName = event.target.value
this.setState (prevState => ({
person: [
...prevState.person.slice(0, personInputIndex),
{...prevState.person[personInputIndex], name: newName},
...prevState.person.slice(personInputIndex)
]
})
)
}
или же
eventSwitchHandler = (event, id) => {
const personInputIndex = this.state.person.findIndex(checkID);
function checkID (passedID) {
return passedID.id === id
}
const newName = event.target.value
this.setState (prevState => ({
person: Object.assign([], prevState.person, {
[personInputIndex]: {...prevState.person[personInputIndex], newName
}})
})
)
}
Шубхам, это помогает, но я очень хочу знать, как я могу этого добиться, используя вместо этого ID? Поскольку индекс элемента изменяется, а идентификатор - нет.
@RahulPatel, мы находим индекс по id, верно?
eventSwitchHandler = (event, id) => {
const personInput = this.state.person.findIndex(checkID);
function checkID (passedID) {
return passedID.id === id;
}
const person = {...this.state.person[personInput]};
person.name = e.target.value;
const newPerson =[...this.state.person];
newPerson[personInput] = person;
this.setState ({person: newPerson})
}
Человек - это объект, а не массив, думаю, поэтому метод
mapне работает. Вы можете найти это полезным: stackoverflow.com/questions/14810506/… Ошибка на скриншоте действительно странная.