如果 useState() 的更新不触发组件重新渲染,可能是因为更新的数据是引用类型的对象。这是因为对象在 JavaScript 中是引用类型,它们的值在内存中的地址是不变的,并不能简单地通过比较新值与旧值来判断是否发生更新。因此,即使对象引用的值已经发生了改变,但它们的地址仍然相同,React 就会认为值没有改变,不会触发重新渲染。
要解决这个问题,可以使用以下方法之一:
使用不可变数据类型:使用不可变的数据类型,如字符串、数字和布尔值,而不是引用类型的对象,这样就不会出现值被修改但地址相同的问题。
使用深拷贝:在更新 state 时,使用深拷贝将旧的 state 值复制给新的 state,这样一来,新的 state 值的地址与旧的 state 不同,就能够触发重新渲染了。可以使用 JSON.parse(JSON.stringify()) 方法进行深拷贝。
下面是一个使用深拷贝来更新 state 的示例代码:
function MyComponent() {
const [data, setData] = React.useState({ name: 'Alice', age: 20 });
function handleUpdate() {
const newData = JSON.parse(JSON.stringify(data));
newData.age++;
setData(newData);
return (
<p>Name: {data.name}</p>
<p>Age: {data.age}</p>
<button onClick={handleUpdate}>Update age</button>
</div>
在上述代码中,使用 JSON.parse(JSON.stringify()) 方法对旧的 state 进行深拷贝,并修改其 age 属性后作为新的 state 值,从而可以正常触发重新渲染。
在useEffect中监听state变化,存进ref中
import './App.css';
import React, { useState,useRef,useEffect} from 'react';
function App() {
let [count,setCount]=useState(0)
const myRef =
在写一个 ReactNative 项目的时候,列表渲染一个对象数组,数组结构如下
const [projList, setProjList] = useState(
title: '嵌入式em1000 演示项目 - full',
ip: '121.36.2.95/em1000/full/#/'
React中默认浅监听,当变量为引用类型时,栈中存的是对象的引用(地址),setState改变的是堆中的数据。所以此时set后,栈中的地址还是原地址,React浅监听到地址没变,会认为State并未改变,所以没有重新渲染页面。useState() 属于异步函数,在useState() 第一次存储的时候,值会存储不上。
解决办法: 请检查你的state是不是直接改变原state的, 记住不要直接修改state
原因: reducer 中 state 是引用,在 reducer 中改变 state 是错误的, 虽然 store 里面的 state 是改变了,但是 react - redux 会认为dispatch 前后的 state 没有改变,就不会重新渲染页...
useState的数组,遍历请求异步接口,追加参数后,更新设置原数组
方案01. 可改造 setArr为function
方案02. 封装使用useState的回调函数
方案03:【推荐】useEffect + es6中的Promise.all()处理(复杂任务也适用)
方案04:useEffect + es5中的回调函数callback处理(逻辑有点绕,因要固定排序)
方案05:useEffect + useState回调函数写法(数据量大的时候需要额外测试处理)
1.可改造 setArr为funct