数组内容未在 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 的理解是，当发生更改时，组件会重新渲染自己。那是对的吗？无论如何，有人可以向我解释为什么我的数组内容不会呈现吗？我尝试过根据errors数组的长度是否大于0进行映射，这也不起作用。

Answer 1

您不能修改您的状态对象或它直接包含的任何对象；您必须改用setState。而当你根据现有状态设置状态时，你必须使用它的回调版本； details.

所以在你的情况下，如果你想添加到现有的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]}));
}

如果您想替换 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) { // Or maybe you don't want this check and want to
                     // set it anyway, to clear existing errors
    this.setState({errors});
}

Answer 2

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

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