React TypeScript: react-markdown无重载匹配此调用

Question

如果需要，我很乐意转移到另一个库，但react-markdown似乎有很好的报告，然而，当我试图在函数组件中使用它与typescript一起使用时，我得到了下面的错误。

import React from 'react';
import Markdown from 'react-markdown';

const Home: React.FC = () => {

  const getMarkdown = async () => {
    const markdown = await fetch('../markdown/home.md');
    const text = await markdown.text();
    return text;
  }
  const src = getMarkdown();

  return (    
      <div className='max-width'>
          <span className='body'>
            <Markdown source={src} />
          </span>
      </div>
  );
}

export { Home };

我得到的错误是

No overload matches this call.
  Overload 1 of 2, '(props: Readonly<ReactMarkdownProps>): ReactMarkdown', gave the following error.
    Type 'Promise<Response>' is not assignable to type 'string'.
  Overload 2 of 2, '(props: ReactMarkdownProps, context?: any): ReactMarkdown', gave the following error.
    Type 'Promise<Response>' is not assignable to type 'string'.  TS2769

Answer 1

您可以使用react钩子

const Home = () => {
const [text, setText] = useState(null);
  useEffect(() => {
     async function getText() {
         const markdown = await fetch('../markdown/home.md');
         const text = await markdown.text();
         setText(text);
     }
     getText();
  }, []);
  return (<div className='max-width'>
          <span className='body'>
            <Markdown source={text} />
          </span>
      </div>);
}