React子组件计算数据如何传给父组件且避免跨组件更新报错

报错原因 #

你在子组件的渲染函数主体中直接调用了父组件传入的passToParent方法，该方法会触发父组件的状态更新。React不允许在一个组件的渲染过程中直接修改另一个组件的状态，因此抛出该错误。

解决方案 #

方案1：子组件渲染完成后同步状态 #

将passToParent的调用放在useEffect钩子中，钩子会在子组件渲染完成后执行，不会打断正常的渲染流程：

import { useEffect } from 'react';

const Child = ({ passToParent }) => {
  let url = "www.google.com";
  const findUrl = () => {
    return url;
  };
  let finalValue = findUrl();
  const finalText = finalValue.toUpperCase();

  useEffect(() => {
    passToParent(finalText);
  }, [finalText, passToParent]);

  return (
    <div>
      <a href={finalValue}>
        <div>{finalText}</div>
      </a>
    </div>
  );
};

export default Child;

父组件代码无需修改。

方案2：抽离公共逻辑（更推荐） #

直接把可复用的findUrl逻辑抽成独立的工具函数，父子组件分别调用即可，不需要做跨组件的状态同步，没有额外的重渲染开销，逻辑更清晰：

1. 新建公共工具文件utils.js：

export const findUrl = () => {
  const url = "www.google.com";
  return url;
};

2. 修改父组件：

import { findUrl } from './utils';

const Parent = () => {
  const finalValue = findUrl();
  const myValue = finalValue.toUpperCase();

  return (
      <div className={styles.innerContainer}>
        <div className={styles.introPara}>{myValue}</div>
        <Child />
      </div>

  );
};

export default Parent;

3. 修改子组件：

import { findUrl } from './utils';

const Child = () => {
  const finalValue = findUrl();
  const finalText = finalValue.toUpperCase();

  return (
    <div>
      <a href={finalValue}>
        <div>{finalText}</div>
      </a>
    </div>
  );
};

export default Child;

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