Javascript 数组内容未在ReactJS中呈现

我还没有反应过来。我试图在ReactJS中映射数组的内容。目前，我没有结果渲染。下面是我用来映射数组内容的代码部分：

return (
        <div>
            {this.state.errors.map( (error, index) => 
                <div key={index} className="alert alert-danger" role="alert">
                    {error}
                </div>
            )}
        </div>
       )

这里是我填充错误数组的地方：

if(this.state.daysOfWeek.length < 1) {
    this.state.errors.push('Must select at least 1 day to perform workout');
}
if(this.state.workoutId === '') {
    this.state.errors.push('Please select a workout to edit');
}

console.log(this.state.errors);

if（this.state.daysOfWeek.length<1）{
this.state.errors.push（'必须至少选择一天执行训练'）；
}
如果（this.state.workUtid==''）{
this.state.errors.push（'请选择要编辑的训练'）；
}
console.log（this.state.errors）；

---

我看到数组正在console.log上填充这些字符串。我对React的理解是，当进行更改时，组件将重新呈现自身。对吗？无论如何，有人能给我解释一下为什么我的数组内容不会呈现吗？我已尝试基于错误数组的长度是否大于0进行映射，但这也不起作用。

在React中，您决不能直接分配给

此.state

。改用

this.setState（）

。原因是，否则React将不知道您已更改状态

---

此规则的唯一例外情况是，您直接指定给

此.state

的是组件的构造函数。

您无法修改状态对象或其直接包含的任何对象；您必须改用

setState

。当您根据现有状态设置状态时，必须使用它的回调版本

因此，在您的情况下，如果要将现有的

this.state.errors

数组添加到中，那么：

let errors = [];
if(this.state.daysOfWeek.length < 1) {
    errors.push('Must select at least 1 day to perform workout');
}
if(this.state.workoutId === '') {
    errors.push('Please select a workout to edit');
}
if (errors.length) {
    this.setState(prevState => ({errors: [...prevState.errors, ...errors]}));
}

---

你不能直接操纵状态对象。啊，我明白了。因此，我应该将它们推送到一个本地声明的数组，然后使用setStateThigh将该数组分配给我的errors数组<代码>让错误=。。。；this.setState（{errors:errors}）。您不需要再次包含所有其他状态属性，只需要更改您正在更改的属性。谢谢！这种方法奏效了，我很清楚这一点

let errors = [];
if(this.state.daysOfWeek.length < 1) {
    errors.push('Must select at least 1 day to perform workout');
}
if(this.state.workoutId === '') {
    errors.push('Please select a workout to edit');
}
if (errors.length) {
    this.setState(prevState => ({errors: [...prevState.errors, ...errors]}));
}

let errors = [];
if(this.state.daysOfWeek.length < 1) {
    errors.push('Must select at least 1 day to perform workout');
}
if(this.state.workoutId === '') {
    errors.push('Please select a workout to edit');
}
if (errors.length) { // Or maybe you don't want this check and want to
                     // set it anyway, to clear existing errors
    this.setState({errors});
}