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

Posted 2023-02-22

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

【英文标题】：Argument of type is not assignable to parameter of type 'SetStateAction<never[]>'. in React

【发布时间】：2021-10-03 10:41:23

【问题描述】：

我是 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”类型的参数。

【问题讨论】：

您的传递和对象 -> contacts: [ 然后将状态创建为数组。 -> useState([])，也被视为您有一个接口IContactCardProps，使用它也可能有意义。

对不起@Keith，我不明白你实际上想说什么。

我将尝试在答案中进行更多解释。

【参考方案1】：

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

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

类似->

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

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

【讨论】：

我仍然在挣扎@Keith。如果我使用 useState (contacts: []);，我仍然需要像上面一样写下一个状态，我仍然得到下划线和相同的错误。你能帮我写一下sn-ps吗？