Реагировать TypeScript: реагировать на разметку без перегрузки соответствует этот вызов

Question

Я с радостью перехожу в другую библиотеку, если необходимо, но у реакционной-уценки, похоже, хорошие отчеты, однако я получаю следующую ошибку, когда пытаюсь использовать ее с машинописью в функциональном компоненте.

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

Вы можете использовать реагирующие крючки

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>);
}