如何从axios响应中在对象的react typescript数组中设置数据

Question

我正在使用对 typescript 的反应我正在尝试使用 Axios 从 API 中获取数据。 我创建了一个对象数组的状态，然后尝试从 Axios 中的响应中设置数据：

const [users, setUsers] = useState<Users[]>([]);

type Users = {
    userId: number,
    name: string,
}

useEffect(() => {

const response = async () => {
        await axios.get(
          "https://localhost:5000/users",{
            headers: { "Content-Type": "application/json" },
          }
        );
      }

 response().then((res) => {
        setUsers({userId: res.userId, name: res.name})
      })


},[])

我在setUsers上说：'{ userId: any; 类型的参数； }' 不可分配给“SetStateAction<Users[]>”类型的参数。 对象文字只能指定已知属性，并且 'userId' 不存在于类型 'SetStateAction<Users[]>

Answer 1

您需要将其附加到最后一个状态：

response().then((res) => {
    setUsers((prevUsers) => prevUsers.concat(res));
    // setUsers((prevUsers) => [...prevUsers, res]); // another way
});

TypeScript 抱怨是因为你给users一个单独的Users对象而不是一个数组。