react setState不更新的问题

react setState不更新的问题

笔者在开发中写了这样一段代码：

...
<Radio.Group
   onChange={(e) => {
   let answerRes = answerResult;
   answerRes[index] = e === item.answer;
   setAnswerResult(answerRes);
 }}
 >
...

照理说react的页面在setState后会触发页面的render，但是页面并没有触发更新，于是笔者开始排查原因。

首先需要了解以下几个知识点：

1. 深拷贝和浅拷贝的区别

   简单来说，如果B复制A，如果修改A的值B随机也改变，那么B复制A的动作就是浅拷贝，反之就是深拷贝。

   详情可见：js浅拷贝与深拷贝的区别和实现方式 - 简书 (jianshu.com)

2. 基本数据类型和引用数据类型

   • 基本数据类型（值类型）：字符串（String）、数字（Number）、布尔（Boolean）、空（Null）、未定义（Undefined）、Symbol；
   • 引用数据类型：对象（Object）、数组（Array）、函数（Function）

原因：

​ 因为我给变量answerRes赋值的类型是布尔类型，是基本数据类型，所以answerRes实际赋到的值是同一个引用地址，所以在react看来，answerRes并没有变化（实际上是指针指向的地址里面的值发生了变化），所以页面就不会发生更新。

解决：
赋值的时候转为深拷贝即可。

...
<Radio.Group
   onChange={(e) => {
   let answerRes = [...answerResult];
   answerRes[index] = e === item.answer;
   setAnswerResult(answerRes);
 }}
 >
...

其实是很简单的问题，但是容易忽视，所以写出来提醒自己不要忘记！