类型参数不可分配给“SetStateAction<never[]>”类型的参数。在反应

Question

我是 React 钩子的新手，正在尝试学习它。我有一个简单的 get api，它在 heroku 服务器中提供。我有以下两个组件 ContactCards 和 ContactCard，我在 ContactCards 中提供了 api。

这里我将缩略图和标题作为静态数据，其中 data1 和 data2 是来自 api 的数据。

我的名片

import React, { Component } from "react";

interface IContactCardProps {
  thumbnail?: string;
  title?: string;
  data1?: string;
  data2?: string;
}

interface IContactCardState {}

class ContactCard extends Component<IContactCardProps, IContactCardState> {
  render() {
    return (
      <div className="contact-card">
        <div className="container">
          <div className="thumbnail">
            <img src={this.props.thumbnail} alt={this.props.title} />
          </div>
          <div className="title">{this.props.title}</div>
          <div className="data">{this.props.data1}</div> 
          <div className="data">{this.props.data2}</div>
        </div>
      </div>
    );
  }
}



export default ContactCard;

我的名片

import ContactCard from "./ContactCard";
import axios from "axios";



function ContactCards() {

  const[contacts, setContacts] = useState([])

  useEffect(() => {
    axios.get('https://texas-crm1.herokuapp.com/api/contactinfo')
      .then (res =>{
        console.log(res.data[0])
        let data = res.data[0];
        setContacts ({
                    contacts: [
                      {
                        thumbnail: clock,
                        title: "Opening Times",
                        data1: data.open_hour,
                        data2: data.close_hour,
                      },
                      {
                        thumbnail: telephone,
                        title: "Phone",
                        data1: data.phone_1,
                        data2: data.phone_2,
                      },
                      {
                        thumbnail: location,
                        title: "Location",
                        data1: data.street_name,
                        data2: data.city + ", " + data.state + ", " + data.country,
                      },
                    ],
                  });
      })
      .catch(err =>{
        console.log(err)
      })
  })

  return (
    <div>
      
    </div>
  )
}

在这里，我从 setContacts 中的联系人到 catch 函数之前的右括号都有红色下划线。

错误提示如下：

类型参数 '{ contacts: { thumbnail: string;标题：字符串；数据1：任何；数据2：任何； }[]; }' 不可分配给“SetStateAction”类型的参数。

Answer 1

{ contacts: []} 是一个对象，您的初始状态是使用[]，这是一个数组。 IOW：你试图在当前是一个数组的东西上使用 setState，变成一个包含名为联系人的数组的对象。

我要做的是根据你的IContactCardProps为你创建一个useState接口

类似->

const[contacts, setContacts] = 
  useState<{contacts:IContactCardProps[]}> 
  ({contacts: []});

您的默认 setState 现在是一个具有正确形状的对象，适合您的 setContacts。这里的优点也是您的setContacts 现在已经过类型检查，例如。你不能不小心输入t1tle: "Phone",。