类型'{}'不能分配给类型'（）=>

Question

我有一个关于TypeScript的问题。我想知道您如何在useState中使用输入的id，header，带有接口的文本等属性来“指定”单个对象。

请参见下面的代码：

import React, { useState, useEffect } from "react";

interface SinglePostProps {
  match: any;
}

interface SinglePostState {
  id: number;
  heading: string;
  text: string;
}

const Post: React.FC<SinglePostProps> = ({ match }) => {
  useEffect(() => {
    fetchSinglePost();
  }, []);

  const [singlePost, setSinglePost] = useState<SinglePostState>({});

  const fetchSinglePost = async () => {
    try {
      const fetchSinglePost = await fetch(
        `http://localhost:3001/api/posts/${match.params.id}`
      );
      const singlePost = await fetchSinglePost.json();
      console.log("Single Post", singlePost);
      setSinglePost(singlePost);
    } catch (error) {
      console.error(error);
    }
  };

  return (
    <>{/* <h1>{singlePost.heading}</h1>
      <p>{singlePost.text}</p> */}</>
  );
};

export default Post;

我现在得到的错误是：

如果我控制台记录保存为singlePost状态的对象，则会收到以下消息：

据我了解，您想指定是要等待数组还是对象进入状态。因此，当我执行此操作时，这是我的PostList组件，该组件将对象列表呈现在数组内部，我做了以下操作，并且没有抱怨：

const [items, setItems] = useState<PostListState[]>([]);

我对TypeScript还是很陌生，所以如果有人可以解释我如何处理这类TypeScript错误消息，将不胜感激？ ：）

预先感谢， 埃里克

Answer 1

如错误所示，setState函数接受一个附着在SinglePostState接口上的对象，或者一个返回该对象的函数。当您发送不遵守SinglePostState接口的空对象文字时，您会看到错误，而在第二种情况下，空数组也是PostListState元素的有效数组。您可以发送一个空数组，也可以发送一个数组，其中每个元素都遵循PostListState接口。仅当尝试发送具有其他元素类型（如数字数组或完全不同的数据类型）的数组时，该尝试才会失败。

Answer 2

您告诉编译器，每个PostListState对象必须必须具有其参数，如果要具有可选参数，只需添加？在钥匙后面。

http://www.typescriptlang.org/docs/handbook/advanced-types.html#optional-parameters-and-properties

interface SinglePostStateOPTIONAL {
  id?: number;
  heading?: string;
  text?: string;
}


interface SinglePostState {
  id: number;
  heading: string;
  text: string;
}

//useState<SinglePostState>(/* only works with {id:0, heading:'', text:''}*/);
//useState<SinglePostStateOPTIONAL>(/* works with both {} or {id:0, heading:'', text:''}*/);

//This will fail
const [items, setItems] = useState<PostListState>({});

//This will be right 
const [items, setItems] = useState<PostListState>({id: 0, heading:'', text:''});

//This also will be right

const [items, setItems] = useState<PostListStateOPTIONAL>({});

使用数组时，可以执行以下操作：

const [items, setItems] = useState<PostListState[]>([]);

您对PostListState对象的数组没有任何问题，因为该数组的长度等于0，这意味着您可以拥有一个空的PostListState数组。

//You can have this
const [items, setItems] = useState<PostListState[]>([]); 

// This will fail
const [items, setItems] = useState<PostListState[]>([{}]); 

// This will be right
const [items, setItems] = useState<PostListState[]>([{id: 0, heading:'', text:''}]); 

// This will fail too because you need to pass all the params of the object.
const [items, setItems] = useState<PostListState[]>([{id: 0, heading:''}]);