在 es6 中不可变地反应 setState:无法将未定义或空转换为对象

Question

我正在尝试使用状态不应改变的规则来设置状态，但我不断收到错误。 想不通。

这是我的状态：

this.state = {
jsonReturnedValue: null,
fruit: [
{
id: 1,
title: 'Orange',
selected: false,
key: 'fruit'
},
{
id: 2,
title: 'Grape',
selected: false,
key: 'fruit'
},
{
id: 3,
title: 'Pomegranate',
selected: false,
key: 'fruit'
},
{
id: 4,
title: 'Strawberry',
selected: false,
key: 'fruit'
}
]
}

当组件安装时，我会进行获取：

componentDidMount() {
fetch('http://127.0.0.1:8000/api/printing/postcards-printing')
.then(response => response.json())
.then(json => {
this.setState({ jsonReturnedValue: [...this.state.jsonReturnedValue, json.printCategory.products] }, () => console.log(this.state));
});
}

这将返回错误： 未捕获(在承诺中(类型错误：无法将未定义或 null 转换为对象

以下作品

.then(json => {
this.setState({ jsonReturnedValue: json.printCategory.products }, () => console.log(this.state));
});

然而，工作的人会改变状态，根据我所读到的，这是一种不好的做法。 任何帮助将不胜感激！

Answer 1

您正在尝试传播空原语，这是不可能的。因此，请改为使用初始状态执行此操作：

this.state = {
jsonReturnedValue: [],
fruit: [
{
id: 1,
title: 'Orange',
selected: false,
key: 'fruit'
},
{
id: 2,
title: 'Grape',
selected: false,
key: 'fruit'
},
{
id: 3,
title: 'Pomegranate',
selected: false,
key: 'fruit'
},
{
id: 4,
title: 'Strawberry',
selected: false,
key: 'fruit'
}
]
};

另请注意，您将要执行此操作{ jsonReturnedValue: [...this.state.jsonReturnedValue, ...json.printCategory.products] }。请注意数组第二个索引中的点差。