[英]Array.prototype.map() expects a return value from arrow function array-callback-return
Don't really know why it is saying this but this is the code I believe it is talking about真的不知道为什么要这样说,但这是我相信它在谈论的代码
setUpdate(text, key) {
const items = this.state.items;
items.map((item) => {
if (item.key === key) {
item.text = text;
}
});
this.setState({
items: items,
});
}
The Array.prototype.map
function maps a one-to-one relationship, the resultant array will be the same length as the original. Array.prototype.map
function 映射一对一的关系,结果数组将与原始数组的长度相同。 The error is saying that you aren't explicitly returning a value for each element iterated.错误是说您没有为每个迭代的元素显式返回一个值。
You also don't save the resultant mapped array.您也不保存生成的映射数组。 The result of your code is iteration over the
items
array and mutation with item.text = text;
您的代码的结果是迭代
items
数组并使用item.text = text;
进行变异。 . . In React state and props are to be considered immutable, mutating them directly is very anti-pattern.
在 React state 和 props 被认为是不可变的,直接改变它们是非常反模式的。
setUpdate(text, key){
const items = this.state.items; // <-- saved state reference
items.map(item=>{ // <-- missing result array save
if(item.key===key){
item.text= text; // <-- state mutation!
}
// <-- missing return value (the error)
})
this.setState({
items: items // <-- same reference to previous state!
})
}
You will want to shallow copy the array as well as any nested object that are being updated.您将需要浅拷贝数组以及任何正在更新的嵌套 object。 Use a functional state update to correctly create the next state array from the state array from the previous state.
使用功能性 state 更新从前一个 state 数组中的 state 正确创建下一个 state 数组。 The reason for this is that the next version of the
items
necessarily depends on the previous array.这样做的原因是
items
的下一个版本必然依赖于先前的数组。
setUpdate(text, key) {
this.setState((prevState) => ({
items: prevState.items.map((item) =>
item.key === key ? { ...item, key: text } : item
)
}));
}
You have to use like below你必须像下面这样使用
setUpdate(text, key) {
// loop the existing state and find the key value
const nextItem = this.state.items.map((item) => {
if (item.key === key) {
item.text = text;
}
// return the modified item
return item;
});
// set the new object into state
this.setState({items: nextItem });
}
Wrote this answer without realising that React requires you to provide a new array.在没有意识到 React 需要您提供一个新数组的情况下写了这个答案。
You shouldn't be using map
just to find and update an item in an array!您不应该使用
map
来查找和更新数组中的项目! What's wrong with find
? find
什么问题?
find
will stop on the first element that matches the condition. find
将在匹配条件的第一个元素上停止。
setUpdate(text, key){
const items = this.state.items;
const item = items.find(i => i.key === key);
if (item) item.text = text;
this.setState({
items: items
});
}
The error states that add a return
keywork inside of map arrow function not just any HTML or compnent Eg `错误指出在 map 箭头 function 内添加一个
return
键,而不仅仅是任何 HTML 或组件,例如 `
{props.meetups.map((meetup) => {
return (
<MeetupItem
key={meetup.id}
id={meetup.id}
image={meetup.image}
title={meetup.title}
address={meetup.address}
description={meetup.description}
/>
);
})}
</ul>
` `
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.