React使用useState管理JSON状态时如何响应滑块更新对应属性

你遇到的问题本质是React状态的不可变更新规则没有落地：直接修改嵌套State的属性值不会触发组件重渲染，哪怕你改对了值，界面也不会同步更新。

1. 给每个滑块绑定唯一的定位标识 #

渲染滑块的时候，不要只靠数组下标定位节点——尤其是你的tree是异步加载的嵌套JSON结构，下标在数据更新后很容易错位。遍历节点列表时，把每个节点自带的唯一ID（或者节点在树里的完整路径）作为参数，绑定到滑块的变更回调上：

// 渲染滑块的逻辑片段
{tree.configNodes?.map(node => (
  <Slider
    key={node.uid}
    value={node.val}
    // 把当前节点的uid和变更值一起传给处理函数
    onChange={(e) => handleChange(node.uid, e.target.value)}
    description={node.name}
  />
))}

2. 实现符合不可变规则的handleChange逻辑 #

写处理函数的时候绝对不能出现tree[i].val = 新值这种直接修改原状态的写法，必须基于当前的旧状态生成一份新的对象引用，再返回给setState：

const handleChange = (targetNodeId, newValue) => {
  // 用函数式更新拿最新的prevTree，避免闭包拿到旧状态导致覆盖问题
  setTree(prevTree => {
    // 第一层先拷贝整个tree对象
    const newTree = { ...prevTree };
    // 拷贝需要更新的节点数组，不修改原数组
    newTree.configNodes = prevTree.configNodes.map(node => {
      // 匹配到目标节点时，生成新的节点对象，只替换val属性
      if (node.uid === targetNodeId) {
        return { ...node, val: newValue };
      }
      // 非目标节点直接返回原引用，减少不必要的拷贝
      return node;
    })
    // 返回全新的tree对象，触发React重渲染
    return newTree;
  })
}

• 不要在setTree的时候直接拿组件外层定义的tree值做修改，一定要用setState提供的prevTree参数，否则异步更新场景下会出现状态被旧值覆盖的问题
• 多层嵌套的深层树结构不需要全量深拷贝，只要沿着你要更新的节点路径逐层做浅拷贝就够了，全量深拷贝大JSON对象会带来无意义的性能损耗
• 如果你的tree节点结构不是固定的单层数组，可以在遍历的时候把当前节点的完整访问路径（比如['params', 'video', 'bitrate']）作为定位标识传给handleChange，更新时沿着路径逐层拷贝到目标层级替换val值，适配任意深度的JSON结构

内容的提问来源于stack exchange，提问作者Adi