Не может получить доступ к индексу массива в состоянии ReactJS
Я получаю некоторую информацию из викторины и устанавливаю свое состояние соответственно.
componentDidMount(){
axios.get('https://opentdb.com/api.php?amount=50').then( response =>{
for(var key in response.data.results){
this.setState( prevState => ({
questions: [...prevState.questions, response.data.results[key].question],
answers: [...prevState.answers, response.data.results[key].correct_answer],
wrongAnswers: [...prevState.wrongAnswers, response.data.results[key].incorrect_answers]
}));
}
});
}
ПРИМЕЧАНИЕ: вопросы - это строка, и поэтому - ответ, однако неверный ответ - это массив.
всякий раз, когда я пытаюсь отобразить неправильные ответы внутри своего jsx-кода, данные отображаются так, как должны. Однако всякий раз, когда я пытаюсь получить доступ к индексу или сопоставить элементы массива, я получаю сообщение об ошибке, указывающее, что оно не определено. Я подумал, что это может иметь какое-то отношение к тому факту, что я получаю данные, синхронизированные в componentDidmount, поэтому я проверил метод рендеринга, чтобы увидеть, что отображается.
console.info(this.state.wrongAnswers[this.state.random]);
первый рендеринг я получаю undefined, но с тех пор каждый раз, когда пользовательский интерфейс обновляется, я получаю правильный массив, если я помещаю это в свой код jsx, массив также отображается, как и должен.
Однако я хочу сопоставить неправильные ответы с такими переключателями
{this.state.wrongAnswers[this.state.random].map((wrongAnswer, index) => {
<p key = {'Key-'+index}>{wrongAnswer}</p>
})}
<form action = "">
<input type = "radio" name = "gender" value = {wrongAnswer} />
Male<br/>
<input type = "radio" name = "gender" value = {wrongAnswer}/>
Female<br/>
<input type = "radio" name = "gender" value = {wrongAnswer}/>
Other<br/>
</form>
Почему вы снова задаете тот же вопрос? Это уже решает вашу проблему stackoverflow.com/questions/53571215/…
@HemadriDasari Первое решение улучшило код, но не решило Проблема, которую я до сих пор не определил
Если первое решение не сработало, вы должны прокомментировать и объяснить тому, кто ответил на ваш вопрос о проблеме, а не публиковать как отдельный вопрос. Также, если ответ не помог решить проблему, не принимайте его как подтвержденный ответ.
Возможный дубликат Доступ к элементам вложенного массива в javascript
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Прежде всего, я бы посоветовал вам сначала объединить ваше состояние, а затем один раз вызвать setState (). Представьте, что если у вас сумма = 50, ваше приложение обновится 50 раз, прежде чем будет показан окончательный результат.
Второй совет - поставить условие перед рендерингом данных из вашего состояния, чтобы гарантировать, что список вашего состояния не будет неопределенным во время рендеринга.
class Component React.Component {
state= {
random: someValue,
questions: [],
answers: [],
wrongAnswers: []
}
componentDidMount() {
// Your api logic
// merge and prepare new state object before calling this.setState() !!
const newObject = mergeLogic();
// then setState to execute update just once
this.setState({wrongAnswers: newObject})
}
render() {
const {random, wrongAnswers } = this.state;
return (
{wrongAnswers && wrongAnswers[random].map((wrongAnswer, index) => {
<p key = {'Key-'+index}>{wrongAnswer}</p>
})}
// your other code...
);
}
}
Значит, я должен сохранить всю свою логику в объекте перед установкой состояния?
Я бы посоветовал вам это сделать. Приведенный выше код - это просто демонстрация, я вижу, что у вас тоже есть массивы answers и questions, но писать код с мобильного телефона не весело ...: D
Просто не забывайте, что количество обновлений должно быть как можно меньше.
Большое тебе спасибо! отлично!
рад помочь. Удачи!
Вам нужно скомпоновать все объекты, которые вы хотите в вашем состоянии, а затем один раз вызвать
setState. (setState является асинхронным, вызов его 50 раз, как это, обязательно даст некоторые неожиданные результаты)