相关文章推荐
潇洒的四季豆  ·  js vue ...·  8 月前    · 

如果 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)); // 深拷贝旧的 state
    newData.age++; // 修改值
    setData(newData); // 设置新的 state
  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