React调用setState后组件未重新渲染问题求助

核心问题：直接修改原State对象导致React无法检测到变化 #

你遇到的问题根源在于直接修改了State中的原数组/对象引用，而React的setState依赖于引用变化来判断是否需要重新渲染组件。

看你的删除标签函数：

ondeletetag(row: any, nr: any) { 
  const array = this.state.fields.columns; 
  array[row].tags.splice(nr, 1); // 直接修改原数组
  this.setState({ fields: { columns: array } }); 
  console.log(this.state.fields.columns); 
}

这里array是直接引用了this.state.fields.columns，然后用splice直接修改了原数组的内容。虽然你调用了setState，但传入的columns还是原来的数组引用，React做浅比较时会认为fields.columns没有变化，所以不会触发组件重渲染。

另外还有一个小问题：你渲染标签时用了Object.keys(props.tags).map((key, i) => ...props.tags[i].name...)，这里i是数组的索引，而key是props.tags的键名，如果props.tags是对象而不是数组的话，props.tags[i]可能无法正确获取到对应的标签（比如键名不是数字的时候），应该用props.tags[key].name。

解决办法：创建新的对象/数组副本，避免直接修改原State #

你需要在修改数据时，创建新的数组和对象副本，确保每次setState都传入全新的引用，这样React就能检测到变化并触发重渲染。

修改后的ondeletetag函数可以这样写：

ondeletetag(row: any, nr: any) { 
  // 先复制外层columns数组
  const updatedColumns = [...this.state.fields.columns];
  // 再复制对应row的tags数组，然后删除指定项
  const updatedTags = [...updatedColumns[row].tags];
  updatedTags.splice(nr, 1);
  // 更新row的tags为新数组
  updatedColumns[row] = {
    ...updatedColumns[row],
    tags: updatedTags
  };
  // 最后setState，传入全新的fields对象
  this.setState({ 
    fields: { 
      ...this.state.fields,
      columns: updatedColumns 
    } 
  }); 
}

这样做的好处是：

• 使用展开运算符[...arr]创建数组的浅副本，避免直接修改原数组
• 对于嵌套对象updatedColumns[row]，也创建了新的对象副本，保证引用变化

同时修正标签渲染的代码，把props.tags[i].name改成props.tags[key].name：

{Object.keys(props.tags).map((key) => (
  <div 
    key={key} // 这里建议用key而不是i作为唯一key
    style={{backgroundColor: "#0753ad", height: "20px", borderRadius: "3px", display: "inline-block", padding: "5px", lineHeight: "0px", float: "left", color: "white", marginRight: "5px", fontSize: "12px"}}
  > 
    {props.tags[key].name} 
    <i className="fa fa-cog"></i> 
    <i className="fa fa-trash" onClick={() => props.ondeletetag(props.index, key)}></i> 
  </div> 
))}

注意这里把key={i}改成了key={key}，因为i是索引，当数组元素顺序变化时，React可能会复用错误的组件，用唯一的key值（比如标签的id或者对象的键名）能提高渲染效率和正确性。

为什么forceUpdate()也没用？ #

forceUpdate()会强制组件重渲染，但如果你的子组件（比如CardWithDnD）是基于props来渲染的，而props对应的tags还是原引用（因为你直接修改了原数组），子组件可能会因为shouldComponentUpdate的浅比较（如果是类组件）或者React.memo的浅比较（如果是函数组件）而拒绝重渲染。所以解决根本问题还是要保证State的引用变化。

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