使用useState将对象推送到状态数组时出现typescript错误
在使用useState将对象推送到状态数组时出现TypeScript错误的情况下，可能是由于类型不匹配导致的。useState是React中的一个钩子函数，用于在函数组件中添加状态。它接受一个初始状态值，并返回一个包含状态值和更新状态值的数组。
在TypeScript中，需要明确指定状态的类型。如果尝试将一个对象推送到状态数组中，需要确保对象的类型与状态数组的类型一致。否则，TypeScript会报错。
解决这个问题的方法有两种：
- 明确指定状态数组的类型：在声明状态数组时，使用泛型来指定其类型。例如，如果要推送一个包含name和age属性的对象到状态数组中，可以这样声明状态数组：
const [users, setUsers] = useState<{ name: string, age: number }[]>([]);。这样就明确了状态数组中元素的类型为包含name和age属性的对象。 - 使用类型断言：如果无法明确指定状态数组的类型，可以使用类型断言来告诉TypeScript忽略类型检查。例如，
const [users, setUsers] = useState([] as any[]);。这样就将状态数组的类型断言为any[]，即任意类型的数组。
无论采用哪种方法，都需要确保在推送对象到状态数组之前，对象的类型与状态数组的类型一致，以避免TypeScript错误。
关于useState的更多信息和使用示例，可以参考腾讯云的React Hooks文档：https://cloud.tencent.com/document/product/213/60936
相关·内容
我试图通过给出正确的类型来让typescript满意。但我想不出确切的语法。 export type CategoriesType = {
id: string;
title: string;
url: string;
courses: CoursesType[];
};
const [singleCategory, setSingleCategory] = useState<CategoriesType>([] as any);
useEffect(() => {
const categories = Categories;
for (con
浏览 40提问于2020-12-30得票数 0
3回答
我正在尝试将使用setData函数设置的数据推送到数据中。我可以推一次数据，但是当我第二次推送数据时，它取代了数据，而不是存储在datas1。我在这里做错什么了。提前谢谢你。
export default function App() {
const [data,setData]= useState([]);
const [activity, setActivity]= useState([])
const [name, setName] = useState("")
const datas=[];
useEffect(()=>{
// handlePre
浏览 1提问于2022-05-03得票数 4
回答已采纳
const {nav, setNav} = useState(true);
const changeState = () => {
setNav(false)
};
useEffect(() => {
changeState();
}, [nav]);
在这个代码片段中，我将初始状态设置为"true“，并将其更改为"false”。无论设置或更改什么状态，它都会引发TypeScript错误(未定义)：
浏览 6提问于2021-09-27得票数 0
回答已采纳
我正在尝试使用TypeScript在React项目中创建上下文。这是我第一次使用TypeScript，我收到一个错误。我试着创建一些接口来解决这个问题，但是我找不到解决这个问题的方法。 下面是我的上下文文件： import React, { createContext, useState, ChangeEvent } from 'react';
interface ITransaction {
name: string;
amount: string;
}
interface ITransactions {
transactionsList: ITransac
浏览 16提问于2020-07-10得票数 0
回答已采纳
由于某些原因，我无法运行我的reason应用程序，因为以下错误：
TypeScript:属性'name‘在'any[]’类型上不存在。
我将根据API数据导出TS类型：
export type CartItemType = {
id: number;
name: string;
image: string;
amount: number;
chair: {
name: string;
colors: {
white: {
hex: string;
};
};
};
};
获取数据：
co
浏览 12提问于2021-08-05得票数 3
回答已采纳
我正在使用带有Typescript的React，并希望将uid添加到dataId数组中。这是我的代码。 type ElementData = {
uid: string;
description: string;
}
const Modal:React.FC<Props>= (props) => {
const [chipsState, setChipsState] = useState(false);
const [dataId, setDataId] = useState([]);
const onChipClick = (element:
浏览 30提问于2021-05-03得票数 1
回答已采纳
1回答
我正在和Next.js和Typescript一起做一个项目。我有一个表单，这是第一次使用Typescript和复选框类型。我在试图获取所有复选框的值时遇到问题，如果为true添加或删除如果为false则添加。此外，我尝试了扩展操作符，但它破坏了代码。这是代码：
各国：
const [callTime, setCallTime] = useState<any>('');
const [isChecked, setIsChecked] = useState<boolean>(false);
阵列：
const preferredTime = [
{
浏览 2提问于2022-05-25得票数 1
回答已采纳
使用React，我定义了两个接口，ICard，IList：
ICard
interface ICard {
id: any;
text: string;
index?: number;
list?: number;
}
IList
interface IList extends Array<ICard> {
index?: number;
}
我想要创建一个类型，它是一个IList列表，我将在一个独立的组件中使用它，该组件位于IList之上并保存这个列表列表。我尝试将setState中的列表定义为：
const [lists, setList
浏览 2提问于2021-01-20得票数 1
我正在尝试使用Typescript创建一个React功能组件，它将从API获取数据，然后将数据发送到另一个组件，但是，我得到了一个错误：" error : Too loop- renders . React限制呈现的次数，以防止无限循环。“ 请提供任何建议！ useEffect(() => {
await axios.get('https://quote-garden.herokuapp.com/api/v3/quotes/random').then((resp) => {
setQuote1(resp.data.data[
浏览 133提问于2021-10-05得票数 0
回答已采纳
const [state, setState] = useState<string[]>([]);
const deleteItem = (item: string) => {
let newItem: string[] = [];
setState((prev) => {
newItem = [...prev];
newItem.splice(newItem.indexOf(item), 1);
setState(newItem);
return newItem;
});
};
浏览 39提问于2021-06-28得票数 1
2回答
我有个TypeScript问题要问你。我想知道如何在useState中“指定”一个对象，其中包含输入的id、标题、带有接口的文本等属性。
见下面的代码：
import React, { useState, useEffect } from "react";
interface SinglePostProps {
match: any;
}
interface SinglePostState {
id: number;
heading: string;
text: string;
}
const Post: React.FC<SinglePostPro
浏览 0提问于2019-12-09得票数 2
回答已采纳
我只想了解为什么第33行不工作(标记出来)，但是第32行工作。为什么我不能简单地将一个对象推送到数组中？这两行(第32行和第33行)不应该做完全相同的事情吗？
参考：
import React, { useState } from "react";
function ThingsToDo({ thing }) {
return <div>{thing.text}</div>;
}
function ToDoForm({ add }) {
const [value, setValue] = useState("");
c
浏览 4提问于2020-11-09得票数 1
回答已采纳
我试图从后端获得JSON输出，并使用异步函数显示它，但我得到了一个错误，说-
TypeScript error in /src/views/Sent.tsx(41,9):
Object is possibly 'null'. TS2531
39 | )}
40 | {rows &&
> 41 | rows.map((row))(
| ^
42 | <p>row.id</p>
43 | )}
浏览 17提问于2021-02-15得票数 0
回答已采纳
1回答
我正在尝试将钩车发送到另一个组件，我不明白你是如何在typescript中发送道具的。我只是想在侧边栏组件中显示购物车数据。提前谢谢。
export type ItemType = {
id: number;
name: string;
price: number;
content: string;
image: string;
amount: number;
}
const Cardsitem = ({ id, name, image, content, price, amount }: ItemTyp
浏览 1提问于2021-05-23得票数 0
1回答
我是一个初级程序员，我试图获取一个api并使用React对结果进行样式化。我的页面在初始加载时运行良好，随后在VScode上保存，但是当我从浏览器刷新页面时，我会得到张贴在图像上的错误。
这里是我的代码： App.js
```import React, { useEffect, useState } from 'react';
“进口”/附录“；
从‘./components/学生’进口学生；
从“样式-组件”导入样式；
函数App() {
const studentInfo，setStudentInfo = useState({})；
const searchResult，s
浏览 5提问于2022-02-28得票数 0
回答已采纳
每次我尝试映射它时，都会出现这个错误。代码如下： import './App.css';
import React, { useEffect, useState } from 'react';
import Loading from './Loading';
import Tours from './Tours';
function App() {
const [loading, setLoading] = useState(true);
const [tours, setTours] = useState([]
浏览 21提问于2021-06-24得票数 1
目前，我正在开发一个React，Typescript项目，使用react semantic-ui实现进度条。所以我想出了一个打字错误。这是我的密码
import React, { Component,useState } from 'react'
import { Button, Progress } from 'semantic-ui-react'
export default function ProgressMobileStepper() {
//let percent :number
const [activeStep={percent:0}
浏览 2提问于2021-10-23得票数 2
回答已采纳
2回答
我是reactjs的初学者，我试图映射一个数组并获取文件并将其设置到另一个数组中，但我得到了一个错误"TypeError: reactjs is not iterable“。
这是我的代码
import "./App.css";
import { useState } from "react";
function App() {
const array = [
{
no: "3",
title: "dream",
singer: "anak",
},
浏览 5提问于2020-11-26得票数 0
我现在正试图教自己反应，但我遇到了一个问题： 我正在学习一个关于如何使用firebase和React构建身份验证应用程序的教程。教程中的人用的是javascript，我用的是typescript。 我有一个语法错误，我不能自己修复： import React, { useEffect, useState } from "react";
import app from "firebase";
export const AuthContext = React.createContext([]);
export const AuthProvider = (chi
浏览 3提问于2021-01-04得票数 0
2回答
我有一个在后端有nodejs/express和typeorm/mysql的react前端应用程序。我已经建立了一个twitter的“新闻馈送”的克隆，我们可以在那里发布新的推文(文章)。在顶部，我有一个输入字段，用户可以提交新的帖子。一旦用户提交了新帖子，他必须刷新页面才能看到新帖子。如何在不重新加载应用程序或在提交新帖子后看到新帖子的情况下实现“实时重新加载”。我使用hook和fetch发送useEffect()请求来与后端通信。 从主页获取帖子和创建新帖子的代码： const [posts, setPosts] = React.useState([]);
const [isLoaded,
浏览 10提问于2021-03-04得票数 0
回答已采纳
1回答
我以下面的形式编写state const [state,setState] =useState({
type:false,
imageSrc:'',
captionImage:'',
showImage:false,
}); 的形式更改状态时 setState({type:true});
setState({captionImage:'hellooo'});
setState({imageSrc:link}); 并将其发送到另一个组件，该组件中有未定义的，但我以 const [type, setType] =
浏览 15提问于2021-03-28得票数 0
回答已采纳
我使用React已经有一段时间了，昨天我在一个基于Typescript的项目中接触到了我的脚。在重构之前，类有这样的状态： interface INavItemProps {
route: IRoute;
}
interface INavItemState {
toggleStateOpen: boolean
}
class NavItem extends Component<INavItemProps, INavItemState> {
constructor() {
this.state = { toggleStateOpen: false };
浏览 18提问于2019-02-19得票数 4
回答已采纳
因此，我试图将一个变量从我的状态中推到一个名为list的数组上。但是它正在抛出这个错误，说未定义不是一个函数。然而，当我切换推送到连接时，它就能工作了。但是我想用推，因为它更快。我该如何解决这个问题？
AsyncStorage.getItem("one").then((value) => {
if (value === "true"){
this.setState({
list: this.state.list.push({
name: 'Butter',
chec
浏览 0提问于2018-10-07得票数 3
回答已采纳
我有一个表单，用户可以添加一个点击事件的输入字段。我构建了一个处理程序，用户可以在其中添加多个文本字段并插入将发送到数据库的多个名称。我成功地添加了输入字段，我遇到了一个难题，我无法将字符串数据提交到数据库。我通过将输入字段的值压入employee数组解决了这个问题。我的问题:当我添加第二个文本字段时，会出现错误employee.push is not a function.
我的问题是我该如何解决这个问题？例如，如果用户想要通过添加两个文本字段来输入姓名来添加两个姓名，我如何修复将姓名发送到DB的代码？
我知道我必须映射原始映射的结果才能做到这一点，但我不确定如何将处理程序事件的目标值插入到
浏览 0提问于2021-11-29得票数 0
我在React函数组件中有一个函数，它在普通的JavaScript中是有效的语法(当然，没有类型定义)，但是在TypeScript中它有问题。这就是我们讨论的函数： const getSelection = (id: number, selection: string) => {
setAnswers((answers) => {
const result = [...answers];
result[id] = selection; // The error is here
return result;
});
};
浏览 391提问于2020-08-25得票数 0
回答已采纳
3回答
我正在尝试在一个功能组件中创建一个react上下文提供程序。我使用useState钩子为其他组件提供一个数组，并使用一个add函数将一个新值推送到该数组中。数组和add函数都是通过上下文提供程序提供的。 它似乎是通过执行以下操作来使用带有状态挂钩的推送 var newArray = array
newArray.push("text")
setArray(newArray) 不会导致使用状态的组件重新呈现，但在使用 setArray(array=> [...array, "text"]) 使用通过上下文提供程序提供的数组的组件会进行更新。 有人能解释一下
浏览 24提问于2020-04-06得票数 1
回答已采纳
我在使用带有reducer的useState时遇到了一个问题。 我知道useState有一些限制，比如它不能立即更新，在我的例子中就是这个问题。 我从Firestore中提取数据，并使用useState保存数据以供进一步使用，但第一次单击按钮时，例如，我得到以下错误： 📷 在第二次单击之后，所有数据都完美地呈现出来。 有什么方法可以防止这个错误出现吗？ Firestore查询： const handleService = (bUID) => {
const serviceListTmp = [];
firebase.firestore().collect
浏览 23提问于2020-10-27得票数 0
嘿，伙计们，我有两个关于react.js钩子的问题。请帮帮忙。弄糊涂几天：
1.在()中使用[]和不使用[]有什么区别？
我注意到当使用useState([])时，console.log(数组)将类似于
(100) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {
浏览 3提问于2021-02-26得票数 1
回答已采纳
我是TypeScript的新手，尝试键入我的const dialogFuncMap，但是会收到一个错误(在下面的评论中)。如果状态类型为boolean，为什么会出现此错误？怎么修呢？(任何情况除外)
国家：
const [displayBasic, setDisplayBasic] = useState<boolean>(false);
职能：
const dialogFuncMap: Record<string, boolean> = {
'displayBasic': setDisplayBasic, // TS2322: Type
浏览 5提问于2022-07-18得票数 0
我为什么要犯这个错误？
Uncaught Error: Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.**
这是我的密码：
const [roles, setRoles] = useState([]);
useLayoutEff
浏览 18提问于2022-07-11得票数 0
回答已采纳
2回答
因此，我有一个Notesdata数组，其中包含带有属性title、标签行和描述的对象。Notesdata数组存储在appending中的" data“状态变量中，我将此数据状态变量发送到notes视图组件以填充UI，但是当我在数据状态变量中添加一个新对象，然后将其发送到notesview组件时，我将得到错误"Data.map不是一个函数”。
当我打印"data“状态变量时，我得到一个数组，但是当我检查它的类型时，它显示的是"object"，我很困惑为什么它会这样显示。
在将"data“状态变量传递到notesview之前，我还尝试在”data“状
浏览 8提问于2022-09-07得票数 0
回答已采纳
嗨，我想用useState钩子更新位于object中的数组中的新值。
这个结构就是我想要的。
{ A : ['aa', 'aaa', 'aaaa', 'aaaaa'],
B : ['bb', 'bbb', 'bbbbbbb', 'bbbbb'],
C : ['cc', 'ccc'] }
在我的代码中，A、B、C是类别，数组中的元素是keyValue。
以下是我的代码
type selectedInterestType = {
浏览 2提问于2021-05-11得票数 0
我有下面的function函数(使用React的alpha )，它有一个TypeScript错误(认为它仍然有效)。这个错误指向了axios承诺用.then(a=>{setData(A))完成的代码行。我想这是对一个人的抱怨。
TS2345：“空白区”、“自愿型”、“AxiosResponse”型的等价物类型的论证，是不能分配给“SetStateAction”型的产品参数的。“空白点”是不可再分配的，不能再分配给另一类型的“设置状态”。
下面是到代码的链接：
在这个文件中还需要输入更多的内容吗？我是TypeScript的新手，我被告知我不需要做什么就能让它只抱怨这一件事。在代码框
浏览 0提问于2018-12-20得票数 8
回答已采纳
我想知道如何使用react typescript创建一个评论部分，我希望用户输入一个名称和评论，然后将其发送到我的firebase项目。我也想如果所做的评论可以显示在下面的评论表格，下面的代码是我所能做的一切，我该如何处理这一点
import React, { EventHandler, FormEventHandler, useState, FC } from 'react'
import { Box, Button, Grid, TextField } from '@material-ui/core';
import axios from "ax
浏览 1提问于2021-04-16得票数 0
我正在尝试按照一个教程来学习类型脚本中的react。然而，当我构建我的解决方案时，我得到了错误。代码 import React, { useState, useEffect } from 'react';
import axios from 'axios';
const DataFetching = () => {
const [posts, setPosts] = useState([]);
useEffect(() => {
axios.get('https://jsonplaceholder.typicode.c
浏览 10提问于2020-09-04得票数 1
回答已采纳
我开始将代码转换为TypeScript，但由于某种原因，我无法开始工作。
代码没有给出错误，但它没有显示列表。
type song = {
id: number,
artist: string,
titre: string;
links: string[] | number,
has_youtube_link: number,
has_picture: number,
hour: number,
minutes: number,
votes: number
}
interface Songs {
listOfSon
浏览 3提问于2020-10-16得票数 1
回答已采纳
我正在绞尽脑汁，用打字本来表示下列数据：
我尝试如下，但我在ReactJ中出现了一个错误。
interface IDose {
name: string;
date: string;
}
interface IVaccine {
[date: string]: IDose[]
}
const [data, setData] = useState<IVaccine[]>([]);
...
<IonGrid>
<IonRow>
{data.map((d, i) => {
return (
&
浏览 4提问于2020-01-24得票数 0
回答已采纳
当我试图使用useEffect钩子从API中获取数据时，我的React代码出现了一些问题。
这是我的简化代码：
const App = () => {
const [ data, setData ] = useState([]);
const [ loading, setLoading ] = useState(false);
useEffect(() => {
const loadData = async () => {
try {
setLoading(
浏览 3提问于2021-08-27得票数 0
回答已采纳
我试图访问学院数组，但它抛出了一个错误，说“学院.map不是一个函数”。我想循环遍历数组。但是当我检查大学的类型时，它说(学院)的类型是一个对象。我已经将大学状态声明为数组。我不明白如何才能遍历学院数组来显示信息。提前谢谢。 下面是我的代码： import React, { useState, useContext,useEffect } from 'react'
import {
Form,
FormGroup,
Label,
Input,
Button,
Col
} from 'rea
浏览 8提问于2020-12-03得票数 0
回答已采纳
使用TypeScript和function创建一个在数组items中推送一个新对象的函数，正确的方法是什么？
const [state, setState] = useState([
{
firstname: "William",
items: [
{ name: "sword", damage: 100 },
{ name: "shield", damage: 50 },
],
},
{
firstname: "Allison",
items: [
浏览 4提问于2022-01-10得票数 0
5回答
当我单击一个将数组的第一个元素发送到最后一个位置的按钮时，我正在尝试重新呈现一个列表，但是，当我单击该按钮时，组件不会重新呈现，即使console.log显示数组已经更改：codesandbox import React, { useState } from "react";
const DailySchedule = () => {
const [exerciseList, setExerciseList] = useState([
"exercise 1",
"exercise 2",
"exer
浏览 47提问于2020-11-21得票数 1
回答已采纳
2回答
理解React ()钩子
、、、
我正在使用useState()钩子开发一个功能反应组件。我对这个钩子的使用方式或者它背后的设计决策感到有点困惑。
我举了一个例子来说明我的问题：
基于类的构件
在基于类的组件中，this.setState({foo: 'bar'})只使用传递给第一个参数的对象中的键更新状态。如果状态已经包含了不同的值，那么这些值就会被保留下来。
功能组件
我误以为useState()提供的useState()语法和行为与Component提供的语法和行为非常相似。但是，我注意到setState({foo: 'bar'})将替换整个状态，删除未传递的键。
这个问题可以通过在每次
浏览 2提问于2019-07-15得票数 0
回答已采纳
2回答
我正在尝试使用socket.io来练习React.js，所以我试图在两个客户机之间发送消息，但是我很难显示这些消息。我想展示过去发送的信息。现在我想把它作为一个数组来做，因为一个状态不起作用。当控制台记录数组时，它会出现在控制台中，但从不呈现出来。
import { useEffect, useState } from "react";
import io from "socket.io-client";
import "./App.css";
let socket;
const CONNECTION_PORT = "localhost
浏览 2提问于2021-10-04得票数 0
回答已采纳
我试图模拟一个表，在那里我可以添加和删除产品，但是组件只在组件被删除时更新，而不是在添加新行时更新。我用的是useState
这是我的阵列：
const rowss = [
createData(1, 'Zapatillas', 2, 200),
createData(2, 'Chompas', 2, 100),
createData(3, 'Sandalias', 10, 300),
createData(4, 'Teclados', 1, 10),
createData(5, 'Mascarillas'
浏览 3提问于2020-09-03得票数 1
回答已采纳
const response = product.map((item) => {
return item.images;
});
console.log("response is ", response);
const [productItem, setProductItem] = useState(response);
console.log("usestate is ", productItem);
请尽快帮我，我被困在这里三天了，不知道该怎么办
我已经多次尝试解决这个问题，它在usestate初始化之前在控制台
浏览 1提问于2022-10-29得票数 0
在这里，我使用的是react usestate hook，我已经将其作为
const { blogs, setBlogs } = useState([{postId:"",blogCity:"",blogTitle:"",username:"",time:""}]);
现在我想在这个usestate中存储多个博客，但是useEffect钩子返回setBlogs的错误不是一个函数。useEffect的代码是
useEffect(() => {
fetchProfileImage();
浏览 6提问于2022-06-21得票数 0
我有一个通过执行import * as data from './data/data.json';命令导入的data.json文件 在我的App函数中，我执行了const [jobsObject, setJobsObject] = useState([]); 为了将其添加到我的状态中，我正在执行以下操作 useEffect(() => {
setJobsObject(data);
}, []); 我在js中看到过完全相同的代码。我得到的是Typescript Error，上面写着Argument of type '({ "id&#
浏览 27提问于2020-04-23得票数 0
我刚开始使用Typescript，我尝试在React状态下将一个新对象推送到数组中，但我得到了以下错误： Type '{ name: string; address: string; }[] | null' is not an array type.ts(2461)
const info: {
name: string;
address: string;
}[] | null 代码如下： interface StateProps {
info: {
name: string;
address: string;
}[];
}
func
浏览 13提问于2021-11-12得票数 1
回答已采纳
我正在尝试用react学习typescript，现在我很困惑，我该如何setState一个界面呢？我的代码示例：
interface Props {
children: ReactNode | ReactNode[];
}
export interface IMovie {
title: string;
video: boolean;
poster_path: string;
}
export const MoviesContext = createContext<IMovie[] | undefined>([]);
export const M
浏览 26提问于2020-02-09得票数 8
回答已采纳
2回答
我有一个TypeScript问题。
我设定的状态是，某个接口或一个空对象将到达那里。我从这个状态获取组件的信息。但是，该组件发誓，由于接口的存在，状态中不存在空对象。告诉我，请告诉我，如何配置，使TypeScript不发誓和错误消失。谢谢!
const OneNews: FC<NewsObjectInterface> = ({image, title, createdAt, preview, description}) => {
return (
<>
<Header/>
&l
浏览 7提问于2022-02-10得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
云直播活动推荐
腾讯云开发者
