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'的参数。

Answer 1

{ contacts: []} 是一个对象，您的初始状态是使用 []，这是一个数组。 IOW：您尝试将 setState 用于当前是数组的某个对象，然后将其转换为包含一个名为 contacts 的数组的对象。

我要做的是根据您的 IContactCardProps

为您的 useState 创建一个接口

类似 ->

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

您的默认 setState 现在是一个具有正确形状的对象 setContacts。这里的优点也是您的 setContacts 现在已进行类型检查，例如。你不可能不小心放了 t1tle: "Phone",。

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

1 个答案: