[英]React setState of Array inside object ES6
I am new to Javascript so probably I am lacking the fundamentals to solve this issue. 我是Java语言的新手,所以我可能缺少解决此问题的基础知识。 I am trying different things, and reading tutorials, but so far no luck.
我正在尝试不同的东西,正在阅读教程,但到目前为止还没有运气。
The objective is to modify the state, just by addding a new keyword to the array "keywords" that is contained inside the "blockOptions" object. 目的是通过向包含在“ blockOptions”对象内的数组“ keywords”添加一个新关键字来修改状态。 I add a key/value for then using .map() or deleting the keyword if needing.
我添加一个键/值,然后使用.map()或在需要时删除关键字。 I am also trying to use ES6 recommendations.
我也在尝试使用ES6建议。
Here is the constructor: 这是构造函数:
blockOptions: {
...
keywords: [],
And here is the function I call from the component 这是我从组件调用的函数
onAddKeyword(e) {
if (e.key === "Enter") {
var newKeyword = {
text: e.target.value,
key: Date.now()
};
this.setState({
blockOptions.keywords: [...this.state.blockOptions.keywords, newKeyword]
});
console.log(this.blockOptions.keywords);
e.target.value = "";
e.preventDefault();
}
}
If I use this same code with an array that is not nested inside "blockOptions", everything works fine. 如果我将相同的代码用于未嵌套在“ blockOptions”内部的数组,则一切正常。 Any suggestion about the code itself would be valuable as I am still new to JS.
关于代码本身的任何建议都是有价值的,因为我还是JS新手。
Thanks for your help 谢谢你的帮助
The first issue in your code is that you supposse 代码中的第一个问题是您假设
{
blockOptions.keywords: []
}
works as a sort of shortcut for 作为一种快捷方式
{
blockOptions: {
keywords: []
}
}
The left-side on a literal object creation must be only a String
or a Symbol
, your example should throw an Uncaught SyntaxError: Unexpected token :
. 文字对象创建的左侧必须仅为
String
或Symbol
,您的示例应引发Uncaught SyntaxError: Unexpected token :
Besides that, you'll need to do something like: 除此之外,您还需要执行以下操作:
this.setState({
blockOptions: {
...this.state.blockOptions, //copy all the properties
keywords: [...this.state.blockOptions.keywords, newKeyword]
}
})
The gather / ...
operator on Objects, is not an ES2015 feature, but its available through babel. Objects上的collect /
...
运算符不是ES2015功能,但可通过babel使用。
A native ES2015 alternative is 本机ES2015替代方案是
const blockOptionsCopy = Object.assign(
{},
this.state.blockOptions,
{ keywords: [...this.state.blockOptions.keywords, newKeyword] }
);
this.setState({
blockOptions: blockOptionsCopy
})
const { blockOptions } = this.state;
blockOptions.keywords.push(newKeyword);
this.setState({ blockOptions });
You have to do it immutably and copy the whole object and inner array. 您必须做得一成不变,然后复制整个对象和内部数组。
First copy the blockOptions
using the spread operator. 首先使用传播运算符复制
blockOptions
。 Then overwrite the keywords
property with a new array: 然后使用新数组覆盖
keywords
属性:
this.setState({
blockOptions: {
...this.state.blockOptions, // copy blockOptions
keywords: [...this.state.blockOptions.keywords, newKeyword] // overwrite keywords
}
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.