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 进行映射，但这也不起作用。

标签： javascriptarraysreactjs

Answer 1

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

您直接分配给此规则的唯一例外this.state是在组件的构造函数中。