Содержимое массива не отображается в ReactJS
Я все еще новичок в 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.info(this.state.errors);
Я вижу, что массив заполняется этими строками в console.info. Насколько я понимаю, React заключается в том, что компонент будет повторно отрисовываться при внесении изменений. Это верно? В любом случае, может кто-нибудь объяснить мне, почему содержимое моего массива не отображается? Я пробовал сопоставление на основе того, превышает ли длина массива ошибок 0, что тоже не сработало.
Вы не можете напрямую манипулировать объектом состояния.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
В React вы никогда не должны напрямую назначать this.state. Вместо этого используйте this.setState(). Причина в том, что в противном случае React не узнал бы, что вы изменили состояние.
Единственное исключение из этого правила, когда вы назначаете напрямую this.state, находится в конструкторе вашего компонента.
а, понятно. Поэтому вместо этого я должен отправить их в локально объявленный массив, а затем назначить этот массив моему массиву ошибок с помощью setState
Совершенно верно. let errors = ...; this.setState({errors:errors}). Вам не нужно снова включать все остальные свойства состояния, только то, что вы меняете.
Вы не можешь модифицируете свой объект состояния или любой из содержащихся в нем объектов напрямую; вместо этого вы должны использовать 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]}));
}
Если вы хотите заменять для массива 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});
}
Спасибо! этот подход сработал, и я это четко понимаю