使用不变性助手更新更新状态
Updating state with immutability helper update
我想用不变性辅助函数更新我的状态 update (https://github.com/kolodny/immutability-helper)
state = {
field: '',
items: ['Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5', 'Item 6']
};
addElementToList() {
const i = this.state.items.length;
const newState = ()=> {
update(this.state,
{
items: {
$push: [
{
[i]: this.state.field
}
]
}
}
)
};
this.setState = newState;
}
不幸的是,我在执行函数时遇到以下错误。
Uncaught TypeError: (0 , _immutabilityHelper.update) is not a function
我错过了什么,对此有什么想法吗?
我知道 OP 询问了有关使用此第 3 方库的答案,但此库的原始代码片段生成的代码具有类似于 美学 的代码 callback-hell:具体使用了很多嵌套大括号和花括号
因此,我只是想权衡如何使用 JavaScript 的 Array.prototype.concat
来实现相同的 unmutated 状态。
您可能发现以下方法更清晰、更简洁。
使用Array.prototype.concat:
addElementToList() {
const i = this.state.items.length;
const newState = ()=> {
items: this.state.items.concat([this.state.field]);
}
this.setState = newState;
}
使用 ES6 传播语法:
addElementToList() {
const i = this.state.items.length;
const newState = ()=> {
items: [...this.state.items, this.state.field];
}
this.setState = newState;
}
用于比较的原始 OP 代码片段:
它使用不变性帮助程序库 (https://github.com/kolodny/immutability-helper)
addElementToList() {
const i = this.state.items.length;
const newState = ()=> {
update(this.state,
{
items: {
$push: [
{
[i]: this.state.field
}
]
}
}
)
};
this.setState = newState;
}
我想用不变性辅助函数更新我的状态 update (https://github.com/kolodny/immutability-helper)
state = {
field: '',
items: ['Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5', 'Item 6']
};
addElementToList() {
const i = this.state.items.length;
const newState = ()=> {
update(this.state,
{
items: {
$push: [
{
[i]: this.state.field
}
]
}
}
)
};
this.setState = newState;
}
不幸的是,我在执行函数时遇到以下错误。
Uncaught TypeError: (0 , _immutabilityHelper.update) is not a function
我错过了什么,对此有什么想法吗?
我知道 OP 询问了有关使用此第 3 方库的答案,但此库的原始代码片段生成的代码具有类似于 美学 的代码 callback-hell:具体使用了很多嵌套大括号和花括号
因此,我只是想权衡如何使用 JavaScript 的 Array.prototype.concat
来实现相同的 unmutated 状态。
您可能发现以下方法更清晰、更简洁。
使用Array.prototype.concat:
addElementToList() {
const i = this.state.items.length;
const newState = ()=> {
items: this.state.items.concat([this.state.field]);
}
this.setState = newState;
}
使用 ES6 传播语法:
addElementToList() {
const i = this.state.items.length;
const newState = ()=> {
items: [...this.state.items, this.state.field];
}
this.setState = newState;
}
用于比较的原始 OP 代码片段:
它使用不变性帮助程序库 (https://github.com/kolodny/immutability-helper)
addElementToList() {
const i = this.state.items.length;
const newState = ()=> {
update(this.state,
{
items: {
$push: [
{
[i]: this.state.field
}
]
}
}
)
};
this.setState = newState;
}