類型參數不可分配給“SetStateAction”類型的參數<never[]> &#39;。 在反應中

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 函數之前的右括號都得到了紅色下划線。

錯誤說明如下：

'{ 聯系人：{ 縮略圖：字符串； 標題：字符串； 數據1：任何； 數據2：任何； }[]; }' 不能分配給類型為 'SetStateAction<never[]>' 的參數。

Answer 1

{ contacts: []}是一個對象，您的初始狀態是使用[] ，這是一個數組。 IOW：您嘗試將 setState 用於當前是數組的內容，將其轉換為包含名為 contacts 的數組的對象。

我要做的是根據您的IContactCardProps為您的 useState 創建一個接口

類似的東西->

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

您的默認 setState 現在是一個具有正確形狀的對象setContacts 。 這里的優點也是你的setContacts現在被類型檢查，例如。 你不可能不小心把t1tle: "Phone", .