React Native - состояние внутреннего json обновлено, но компонент не отображается

Question

У меня есть приложение, в котором динамические кнопки генерируются в соответствии с числом массивов состояний, при нажатии любой кнопки необходимо изменить цвет кнопки. Я пытался с setNativeProps, но всегда выдавал ошибку из-за не может прочитать setNativeProps неопределенного.

Мой код для этого был -

    //map function
        <TouchableWithoutFeedback key={index} ref=`btnAnswer_${id}`>
             <View style={{
backgroundColor:questions[currentIndex].selectedAnswer[index]["option_"+index] === false ? 'transparent' : 'green',
padding:10,
width:100,
borderRadius:5
}}>
                <Text>
                  //some text
                </Text>
              </View>
         </TouchableWithoutFeedback>

И попытались получить доступ к кнопке, используя эти методы -

=> this.refs[`btnAnswer_${id}`].setNativeProps({style:{backgroundColor:'red'}}));

=> var btnRef = `btnAnswer_${id}`
this.btnRef.setNativeProps({style:{backgroundColor:'red'}}));

Но не удалось использовать описанные выше методы, поэтому я планировал поработать с состоянием и сделать это, мой объект состояния json был похож на это

    questions= [
    {
        "question_id": 1,
        "option_1": "true",
        "option_2": "false",
sequence: [
            2,
            1
        ],
selectedAnswer: [
            {
                "option_1": false,
                "option_2": false
            }
        ]
    },
    {
        "question_id": 2,
        "option_1": "a",
        "option_2": "b",
        "option_3": "c",
sequence: [
            3,
            2,
            1
        ],
selectedAnswer: [
            {
                "option_1": false,
                "option_2": false,
                "option_3":false
            }
        ]
    }
]

И манипулировали состоянием события нажатия кнопки, как это

onButtonPress(questionIndex,answerIndex){
    var questionArray = this.state.questions;
    questionArray[questionIndex].selectedAnswer[answerIndex] 
    ["option_"+answerIndex] = true;
    this.setState({questions:questionArray})
}

В идеале это должно обновить мое состояние и повторно отрендерить мой компонент и сделать мою кнопку цветной, как установлено, но компонент не перерисовывает

Пожалуйста, помогите.

Answer 1

Полный код для компонента помог бы, но есть пара вещей, которые можно сказать:

Прежде всего, я не рекомендую вызывать setNativeProps: это расширенная функциональность, которая имеет свои недостаткии весьма вероятно, что вам не нужно этого делать.

Во-вторых, действительно возможно, что ваш компонент не выполняет повторный рендеринг, потому что когда вы вызываете setState, вы передаете текущее состояние (хотямутировал) в качестве аргумента для setState!

Что вы делаете: var questionArray = this.state.questions и затем вы продолжаете мутировать значение и передавать его в setState.React может сравнивать два значения и, поскольку они являются одним и тем же экземпляром массива (currentState.questions === nextState.questions), реагирование не видит необходимости в повторном отображении.Он не видит, что вы изменили одну логическую переменную, вложенную где-то глубоко в объекте состояния.

Я предлагаю вам прочитать о структурах mustComponentUpdate, React.PureComponent и неизменяемых данных (в отношении реакции).Наконец, если вам нужно обработать множество вложенных обновлений вашего состояния, есть библиотеки, которые могут помочь вам управлять состоянием.Взгляните на immer или mobx .

В-третьих, использование индекса массива как key может быть неправильным!Узнайте больше о ключе реакции.

Answer 2

Ваш компонент без повторного рендеринга крайне маловероятен.

Мой первый совет - нормализовать ваши данные, поскольку они не читаются.

Предполагая, что вы используете currentIndex = 0, questionIndex= 0 и ответ index = 0, вы говорите, что при следующем рендеринге компонента он будет иметь this.state.questions [0] .selectedAnswer [0] .option_0 = true.

Тогда при чтении фонацвет вы читаете вопросы [0] .selectedAnswer [0] .option_0.

Хорошо, либо currentIndex, либо индекс неверны, либо в компоненте, к которому вы относитесь, объект вопросов не ссылается на this.state.questions.

Перечитайте ваш код

В любом случае, я думаю, что вы должны читать непосредственно backgroundColor из состояния, а не иметь один логический тип, а затем создавать логику для метода рендеринга.