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'}}));

但是使用上述方法未成功，因此我计划使用state并完成它，我的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})
}

理想情况下，这应该更新我的状态并重新渲染我的组件并使按钮设置为true时变色，但该组件不会重新渲染

请帮助。

Answer 1

不重新渲染组件的可能性很小。

我的第一个提示是标准化数据，因为它不可读。

假设您当前为currentIndex = 0，questionIndex = 0，答案索引= 0，则表示在下一个渲染组件上，它将具有this.state.questions [0] .selectedAnswer [0] .option_0 =是的。

然后，在阅读背景色时，您正在阅读问题[0] .selectedAnswer [0] .option_0。

好吧，或者currentIndex或index错误，或者在您作为问题对象的组件上没有引用this.state.questions。

重新阅读您的代码

无论如何，我认为您应该直接从状态中读取backgroundColor，而不要使用一个布尔值，然后必须对render方法进行逻辑处理。

Answer 2

该组件的完整代码会有所帮助，但是可以说几句话：

首先，我不建议调用setNativeProps：这是一项高级功能，它有缺点，很可能您不需要这样做。

第二，确实有可能您的组件没有重新渲染，因为在调用setState时，您会将当前状态（尽管是可变的）作为参数传递给setState！

您要做的是：var questionArray = this.state.questions，然后继续对该值进行变异并将其传递给setState。 React可能会比较这两个值，并且由于它们是数组的同一实例（currentState.questions === nextState.questions），因此React不需要重新渲染。它没有看到您更改了嵌套在状态对象深处某个位置的布尔值。

我建议您阅读shouldComponentUpdate，React.PureComponent和不可变数据结构（与react相关）。最后，如果您需要处理许多嵌套的状态更新，则可以使用一些库来管理状态。看看immer或mobx。

第三，将数组索引用作key可能是错误的！阅读更多有关react键的信息。

React Native-状态内部json已更新，但组件未重新呈现

2 个答案: