如何修复 TypeScript function 类型错误？

Question

I have TypeScript code:

const ItemsList: React.FC<any> = async () => {
  const data = await Http.get(url);
  return (
      <ul>
        {data.map(item => {
          return (
            <ItemPreview key={item.id} item={item} />
          );
        })}
      </ul>
  )
}

export default ItemsList

And got error: Type '()=>Promise<JSX.Element>' is not assingable to type 'FC'. Type 'Promise' is missing the folowing properties from type 'ReactElement<any, any>': type, props, key

Have no idea how to fix it. What type should it be instead of 'React.FC'?

Answer 1

You're effectively thinking about it the wrong way. Instead of trying to make React component rendering wait for your data, instead you should be thinking of it in terms of updating state in React. Your component should just render whatever the current state is:

return (
  <ul>
    {data.map(item => {
      return (
        <ItemPreview key={item.id} item={item} />
      );
    })}
  </ul>
)

Now, what is data ? Clearly it's an array, and you also have an asynchronous operation which gets the values for that array. So currently there are a couple potential states:

1. An initial empty array
2. The updated array with data

You'd use React state to track that. For example:

const [data, setData] = useState([]);

Http.get(url).then(result => {
  setData(result);
});

This first sets data to an empty array, and then in the response from the asynchronous operation updates it to the new data. Since it's using setState , this will instruct React to update the rendering of the component because state has changed.

So in this case the UI will first show no results, then momentarily will show the data. You can add complexity to this by tracking an "is loading" state of some kind and showing a "loading spinner" or some indication to the user that data is being fetched.