我有一个问题,状态的重新呈现会导致ui问题,有人建议只更新我的reducer中的特定值,以减少页面上的重新呈现量.

这是我所在州的一个例子

{
 name: "some name",
 subtitle: "some subtitle",
 contents: [
   {title: "some title", text: "some text"},
   {title: "some other title", text: "some other text"}
 ]
}

我现在正在像这样更新它

case 'SOME_ACTION':
   return { ...state, contents: action.payload }

其中action.payload是包含新值的整个array.但现在我实际上只需要更新内容数组中第二项的文本,这样的东西不起作用

case 'SOME_ACTION':
   return { ...state, contents[1].text: action.payload }

其中action.payload现在是我需要更新的文本.

推荐答案

你可以用React Immutability helpers

import update from 'react-addons-update';

// ...    

case 'SOME_ACTION':
  return update(state, { 
    contents: { 
      1: {
        text: {$set: action.payload}
      }
    }
  });

虽然我觉得你可能会做更多类似的事情?

case 'SOME_ACTION':
  return update(state, { 
    contents: { 
      [action.id]: {
        text: {$set: action.payload}
      }
    }
  });

Reactjs相关问答推荐

如何正确使用react memo和renderentry?

重定向React路由中没有根文件夹的所有路径匹配

过滤对象数组并通过迭代对象数组将属性放入新数组

有没有方法覆盖NextJS 14中的布局?

为什么Next.js 14无法解析页面路由路径?

如何将Redux工具包添加到expo (SDK 50)项目?

如何在重新图表中更改悬停时的条形填充 colored颜色 ?

使用REACT-RUTER-V6和ZUSTANDreact 中的身份验证

当列表中的项的顺序改变并且使用唯一键作为它们的索引时,Reaction如何看待呈现方面?

在构建或部署Reaction应用程序时出错

悬停轴时重新绘制自定义参照线

PWA:注册事件侦听器不会被触发

如何测试根据 prop 更改 CSS 属性的 useEffect 钩子?

如何更新 FunctionComponentElement 的 props

React设置上下文并进行导航

为什么我会收到此错误:无法在我的react 包上读取 null 的属性(读取useState)?

条件渲染元素的测试不起作用

从服务器获取数据时未定义,错误非法调用

React - 仅在变量为真时显示项目

将路径数组传递给Route会引发错误