React Native中componentDidUpdate未触发问题及需求说明

问题根源 #

1. 状态更新逻辑错误：父组件直接修改configurableField.attachments内的元素，仅通过configurableField = {...configurableField}重新赋值变量，未调用setState触发组件重渲染，导致父组件不会向子组件传递更新后的props。
2. 引用未发生变更：即使父组件重渲染，由于修改的是原数组内的元素，attachments数组本身的引用没有改变。React通过浅比较判断props是否变化，因此子组件认为attachments props未更新，不会触发componentDidUpdate。

解决方案 #

1. 父组件正确更新状态

确保configurableField是组件状态（存储在this.state中），并在异步回调中通过setState创建新的数组和对象，保证引用变化：

// 从state中获取当前的configurableField
const { configurableField } = this.state;

// 复制原attachments数组，避免直接修改原状态
const updatedAttachments = [...configurableField.attachments];

updatedAttachments.forEach((item, i) => {
  if (item.type.includes("pdf")) {
    const url = item.url.substring(item.url.indexOf(".com") + 4, item.url.indexOf(".pdf") + 4);
    this.documentOrganizerService.getFile(url)
      .then(async (res) => {
        if (res.data.success) {
          const buffer = Buffer.from(res.data.data.Body.data).toString('base64');
          const uri = `${FileSystem.cacheDirectory}${i}.pdf`;
          await FileSystem.writeAsStringAsync(uri, buffer, { encoding: "base64" });

          // 创建新的item对象，替换原数组中的元素
          const newAttachments = [...updatedAttachments];
          newAttachments[i] = { ...item, uri };

          // 调用setState更新状态，触发父组件重渲染
          this.setState({
            configurableField: {
              ...configurableField,
              attachments: newAttachments
            }
          });
        }
      });
  }
});

return (
  <AttachmentField
    attachments={configurableField.attachments}
  />
);

2. 子组件优化props变化检测

在componentDidUpdate中添加深层比较逻辑，确保准确感知attachments的内容变化：

componentDidUpdate(prevProps: Readonly<IFormControlProps>, prevState: Readonly<IAttachmentState>): void {
  // 通过JSON.stringify做深层比较（元素结构复杂时建议用lodash.isEqual）
  if (JSON.stringify(prevProps.attachments) !== JSON.stringify(this.props.attachments)) {
    console.log("check1", prevProps.attachments, this.props.attachments);
    // 在这里执行你的业务处理逻辑
  }
}

关键说明 #

• React状态更新必须通过setState触发，直接修改状态变量不会触发组件重渲染。
• 对于数组、对象这类引用类型的状态，更新时必须创建新的引用（如使用扩展运算符...），才能让React检测到变化。

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