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无法知道您已经更改了状态。

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

Answer 2

您不能修改状态对象或其直接包含的任何对象；您必须改为使用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});
}

数组内容未在ReactJS中呈现

2 个答案: