javascript - 数组内容不在 ReactJS 中呈现

Question

我对 React 还是很陌生。我正在尝试在 ReactJS 中映射数组的内容。目前，我没有渲染结果。这是我用来映射数组内容的代码部分:

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

这是我初始化状态的方式:

this.state = {
    workoutId:'',
    daysOfWeek:[],
    name:'',
    trainingPlan:'',
    errors: []
}

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

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);

我看到数组正在填充 console.log 上的那些字符串。我对 React 的理解是组件会在发生更改时重新呈现自己。那是对的吗？无论如何，有人可以向我解释为什么我的数组内容不会呈现吗？我尝试过根据错误数组的长度是否大于 0 进行映射，但这也不起作用。

Answer 1

在 React 中，你绝不能直接赋值给 this.state。请改用 this.setState()。原因是否则 React 不会知道你已经改变了状态。

此规则的唯一异常(exception)是您直接分配给 this.state 是在组件的构造函数中。