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

Question

I am new to React hooks and trying to learn it. I have a simple get api which is served in heroku server. I have following two components ContactCards and ContactCard in which I have provided the api in ContactCards.

Here I have thumbnai and title as static data where as data1 and data2 are data coming from the api.

My ContactCard

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;

My ContactCards

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>
  )
}

Here, I got red underline from contacts in setContacts to all the way down to the closing parenthesis before catch function.

And the error says the following:

Argument of type '{ contacts: { thumbnail: string; title: string; data1: any; data2: any; }[]; }' is not assignable to parameter of type 'SetStateAction<never[]>'.

Answer 1

{ contacts: []} is an object, your initial state is using [] and that's an array. IOW: Your trying to use setState on something that's currently an array, into something that will become an object that contains an array called contacts.

What I would do is create an interface for you useState, based on your IContactCardProps

Something like ->

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

Your default setState now is an object with the correct shape for your setContacts . The advantage here too is that your setContacts is now type checked, eg. You couldn't accidentally put t1tle: "Phone", .