React传递需异步获取的Props问题求助

你遇到的错误根源是：async函数默认返回Promise对象，而Foo组件的value属性需要的是具体类型的值（而非Promise），直接传递getValue()相当于把Promise传给了value，类型不匹配导致TypeScript报错。

解决方案：用React状态管理异步数据 #

通过useState存储异步获取的最终值，配合useEffect在组件挂载时执行异步函数，确保传递给Foo的是符合类型要求的实际值：

import { useState, useEffect } from 'react';

// 替换ValueType为Foo组件value属性的实际类型
type ValueType = string | number | /* 你的具体类型 */;

export const Bar = (props: Props) => {
  // 初始化状态存储异步值，默认值匹配类型或设为null
  const [value, setValue] = useState<ValueType | null>(null);

  const getValue = async () => {
    const { value } = await initValue();
    setValue(value);
  };

  // 组件挂载时执行一次异步函数
  useEffect(() => {
    getValue();
  }, []);

  // 处理加载状态，避免传递未就绪的值给Foo
  if (value === null) {
    return <div>加载中...</div>;
  }

  return <Foo value={value} />;
};

关键点说明 #

• useState负责存储异步获取的最终值，确保传递给Foo的不是Promise，而是符合类型要求的实际数据。
• useEffect配合空依赖数组，保证异步函数只在组件挂载时执行一次，避免重复调用导致的性能问题或无限循环。
• 加载状态判断：如果Foo不允许value为null/undefined，必须在值就绪后再渲染Foo，否则可以在Foo内部处理可选值逻辑。

可选：添加错误处理 #

如果initValue可能抛出异常，可增加错误状态捕获：

import { useState, useEffect } from 'react';

type ValueType = string | number | /* 你的具体类型 */;

export const Bar = (props: Props) => {
  const [value, setValue] = useState<ValueType | null>(null);
  const [error, setError] = useState<string | null>(null);

  const getValue = async () => {
    try {
      const { value } = await initValue();
      setValue(value);
    } catch (err) {
      setError('获取数据失败');
      console.error(err);
    }
  };

  useEffect(() => {
    getValue();
  }, []);

  if (error) {
    return <div>{error}</div>;
  }

  if (value === null) {
    return <div>加载中...</div>;
  }

  return <Foo value={value} />;
};

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