在array.map中对多个元素使用React useState
是一种在React中管理状态的常见方法。React useState是React的内置钩子函数之一，用于在函数组件中添加和使用状态。
使用useState，可以在函数组件中声明一个状态变量，并且可以在组件的生命周期中更新该变量。当状态变量发生改变时，React会自动重新渲染组件。
在array.map中对多个元素使用useState的一种常见用法是在循环中为每个元素创建一个独立的状态。这样可以为每个元素维护独立的状态，并对其进行相应的操作。以下是一个示例代码：
import React, { useState } from 'react';
function Component() {
const array = [1, 2, 3, 4, 5];
const [values, setValues] = useState(array.map(() => ''));
const handleChange = (index, event) => {
const newValues = [...values];
newValues[index] = event.target.value;
setValues(newValues);
};
return (
<div>
{array.map((item, index) => (
<input
key={index}
value={values[index]}
onChange={(event) => handleChange(index, event)}
/>
))}
</div>
);
}在上面的代码中，通过调用useState方法并传入一个初始状态数组，我们创建了一个名为values的状态变量，它是一个与输入框数量相等的数组。然后，通过map方法渲染了一系列输入框，并将每个输入框的值绑定到values数组中的相应元素。当输入框的值发生改变时，handleChange函数会更新values数组中相应的元素，并使用setValues方法更新状态。
这种方法在处理多个元素时非常方便，每个元素都具有独立的状态，并且可以根据需要进行相应的操作和处理。
关于React useState的更多信息和用法，请参考腾讯云的React Hooks文档：React Hooks - useState
相关·内容
我的后端服务器中的数据如下所示
我想在我的前端react应用程序中显示这些数据。
到目前为止，我已经尝试了以下几种方法：
import {useState, useEffect} from 'react';
import logo from './logo.svg';
import './App.css';
function App() {
const [data,setData] = useState([])
useEffect( () => {
fetch("http://127.0.0.1:5000
浏览 0提问于2021-06-04得票数 0
我试图找到一种方法来动态调用给定字符串的函数或引用给定字符串的变量。例如：
import React, {useState} from 'react'
const array = [
{
text: 'count1',
setFunctionName: 'setCount1',
otherdata: {}
},
{
text: 'count2',
setFunctionName: 'setCount2',
otherdata: {}
}
]
con
浏览 10提问于2021-01-20得票数 0
回答已采纳
3回答
我尝试过与Javascript相关的解决方案，并使用state进行响应，但是我不能用Hooks来实现它。我希望为我在array.map上呈现的每个元素添加3秒的延迟
import React, { useState } from 'react';
const DelayMapHooks = () => {
const [array, setArray] = useState([1, 2, 3])
return (
<div>
{
array.map((elem,
浏览 2提问于2020-08-27得票数 2
回答已采纳
错误: React "useId“不能在回调中调用。必须在React函数组件或自定义React函数中调用。那么，问题是，我们在哪里可以使用useId()？对于映射的div，我还得到了与代码相同的id：
// @ts-ignore
import React, {useRef, useState, useId} from 'react';
interface InputLocationProps {
cleanAddress(): void
}
export const InputLocation: React.FC<InputLocationProps&
浏览 10提问于2022-04-05得票数 1
回答已采纳
我正在学习reason react，但在渲染从json api获取的项目列表时遇到了问题。
let url = region => {
"https://api.openbrewerydb.org/breweries?by_state="
++ Js.String.replaceByRe([%re "/\\s/g"], "_", String.lowercase(region));
};
[@react.component]
let make = (~region) => {
let (breweries, setBre
浏览 29提问于2019-08-04得票数 2
回答已采纳
2回答
对不起，我的英语不是很好。我在学习反应。我要做一个todo应用程序。当我按下按钮时，我希望“输入”内容以h4的形式出现。但我不能地图。你认为哪里有错误？
import "./App.css";
import { useRef, useState } from "react";
function App() {
const [state, setState] = useState([]);
const inp = useRef(null);
const Add = () => {
setState([...state, inp.cu
浏览 5提问于2022-02-03得票数 0
回答已采纳
hello在react中构建了一个应用程序，我从api映射了一些数据，并想知道如何将输入中的数据添加到特定的元素中？我不知道如何做到这一点--我尝试过几种不同的方法--我尝试将映射的元素id添加到状态中，并检查id是否与元素id匹配，但我无法使其工作，我可以让它将标记应用于每个元素，但我希望它只是添加到您输入标记的特定元素中。
const [students, setStudents] = useState([]);
const[tag, setTag] = useState([])
function createCard(students, n ){
return(
浏览 3提问于2022-03-15得票数 1
回答已采纳
我试图在Array.map循环中呈现一个函数组件，当我删除数组的第一个元素时，它会重新呈现主组件，而不是显示剩余的数组元素，而是从UI中删除最后一个元素！(删除的元素保留在UI上！) 我确信我删除的元素是正确的。我在Array.map函数中正确地使用了索引{key=}。我尝试在Array.map中console.log正在呈现给DOM的元素，它显示了正确的元素！但是UI与记录的UI不同！ // index.tsx
/* eslint-disable prettier/prettier */
/* eslint-disable no-unused-vars */
import React,
浏览 23提问于2021-02-11得票数 0
我的uploadStatus状态有问题。我没有得到react-hooks状态的更新值。如果我将console.log()添加到fileOnProgress()中，我将获得uploadStatus状态的[]值。
我尝试将uploadStatus状态放在useEffect中，但发生了无限循环，因为在函数内部状态也在更新。
注意:在这个场景中，已经从其他函数填充了uploadStatus，这就是为什么我希望获得更新值的原因。
import React, { useEffect, useState } from 'react';
function Dropzone {
cons
浏览 18提问于2019-07-26得票数 0
1回答
React:无法筛选组件列表
、、、、
我正在尝试拥有一个表字段列表，这些字段可以在任何时候添加和删除。
问题
一旦我单击删除中间的任何元素(上一个除外)，它就会删除它下面的所有项目。
代码是
我不知道是什么做错了，它删除了所有的元素，即使我试图删除一个特定的元素。
在这里添加代码
import React, { useState } from 'react';
import { v4 as uuidv4 } from 'uuid';
const ListComponent = ({ remove, id }) => {
return (
<tr>
<
浏览 1提问于2021-03-02得票数 0
回答已采纳
1回答
我只是新来的反应JS。我正在尝试用函数名getAllDepartment替换本地存储数据从getAllDepartment文件中检索的代码
if (localStorage.getItem(KEYS.Dept) == null)
localStorage.setItem(KEYS.Dept, JSON.stringify([]))
let Dept = JSON.parse(localStorage.getItem(KEYS.Dept));
return Dept.map(x => ({
...x
}))
使用下面的代码从SQL检索数据
axios.
浏览 1提问于2021-04-11得票数 1
回答已采纳
我目前正在构建一个从api调用接收图像的卡片的图库视图。
我在useffect钩子中进行调用，然后将结果对象传递给要存储的useState。
然后使用urls.map访问存储对象的内容，但得到以下错误->
Uncaught : urls.map不是函数
最终目标是能够通过支持将urls从数组对象(路径data.nfts.media.uri)传递给NFTCard组件。经过测试的道具，他们正在工作。
import axios from "axios";
import React, { useEffect, useState } from "react";
浏览 7提问于2022-10-16得票数 1
回答已采纳
2回答
我正在编写一个用表格形式显示JSON数据的React代码。还有一个按钮，单击该按钮后，我希望汇总列的数据，将其添加到一个新列(sum)中，并显示。这是我的密码。
import { useState } from "react";
const NewTable = () => {
const [data, setData] = useState([
{ val: 2, val2: 3, val3: 1 },
{ val: 4, val2: 1, val3: 9 },
{ val: 6, val2: 1, val3: 1 }
]);
co
浏览 7提问于2022-04-12得票数 1
回答已采纳
测试代码：
import { render, screen } from "@testing-library/react";
import App from "../App";
test("The 2nd button is rendered", () => {
render(<App />);
expect(screen.getByRole("button", { name: "2ND" })).toBeTruthy();
});
我的代码(不起作用的版本，因为我使用array.map
浏览 9提问于2022-09-24得票数 0
我想在一个均匀的div中呈现两个iten，但这是使用array.map()方法在单个div中呈现的。我的代码是： import React from 'react'
import {useState} from 'react'
function Home() {
const [userName, setUserName] = useState('')
const [userEmail, setUserEmail] = useState('')
const [containerArray, setContainerArray] =
浏览 7提问于2020-04-11得票数 1
1回答
我对反应和如何处理空数组的问题是新的。我有一些关于特定类的数据。下面可以看到类数据。我试图在我的web应用程序中显示数据，但是当数组为空时，我在映射数组的逻辑上有问题。
我的代码的简化版本如下所示：
import React from 'react';
import { useState, useEffect } from "react";
const data = {
ece1004: {
number: "ECE 1004",
name: "Introduction to ECE Concepts",
浏览 5提问于2022-04-05得票数 0
您好，我正在练习一个react钩子，但我无法获得useState值。下面是代码
我可以叫number.value，但是
我找不到number.newOne.new
我做错什么了？
import React, {useState} from 'react'
function App() {
const [values] = useState([
{
value: 0,
newOne: [
{
new: 'he'
}
]
},
{
va
浏览 0提问于2020-05-04得票数 0
我试图在应用程序中显示我使用PDFtron在React中构建了一个PDF文件，但遇到了以下错误:在同一个WebViewer元素上创建了两个实例。请为每个WebViewer实例创建一个新元素。
我的代码是：
import { url } from "../../../../config.json";
import React, { useState, useEffect, useRef } from "react";
import { getProject } from "../../../../services/projectService";
浏览 3提问于2021-06-29得票数 0
1回答
我有一个从React调用API的脚本。 我有一个符号数组const assets = ['ADA','KAVA','DOGE']; 我的API字符串如下所示 https://min-api.cryptocompare.com/data/pricemulti?fsyms=${symbol}&tsyms=USD&api_key=API-KEY-HERE 如您所见，我为每个符号调用了3次API，例如，如果我运行此代码，它将运行3次 https://min-api.cryptocompare.com/data/pricemulti?fs
浏览 14提问于2020-08-26得票数 0
我正在使用类型记录在react中获取国家的单个数据，使用restcountries获取国家详细信息，我试图在API中显示语言和货币时出错，所有其他数据都显示在我的浏览器中，除了语言和货币之外，请帮助我学习如何获取嵌套数据。这是我的密码
import { useParams } from "react-router-dom";
import { useState, useEffect } from "react";
import axios from "axios";
const Country = () => {
interface
浏览 7提问于2022-09-15得票数 -2
回答已采纳
1回答
假设我有一个叫伯爵的州。
const [count, setCount] = useState();
现在，假设我希望每次按键盘上的某个键时，增加1的计数。
因此，我可以使用useEffect钩子并向其添加一个事件侦听器。
useEffect(() => {
document.addEventListener("keydown", increaseCount);
}, []);
函数increaseCount，增加计数与1
const increaseCount = () => {
setCount(prevCount => prevC
浏览 3提问于2022-06-04得票数 -1
在internet 11中，我在映射不可变数组对象时遇到了问题。
例如，我有来自服务数组的响应：
array = [{title: 'Hello world'}, {title: 'Night view'}]
我将这个数组转换成不可变的减速器，并将其存储起来。然后在TitlesContainer中，在render方法中尝试迭代项：
render () {
const { array } = this.props
return (
<ul>
{array.map((item, index) => {
r
浏览 2提问于2016-09-01得票数 5
1回答
我正在构建一个小测验应用程序，它从一个API中获取问题和答案，它由起始页和显示问答的另一个页面组成，我以前设置了一个状态start来切换布尔值，以知道何时呈现问题，但是我映射的request数组没有使用Question组件在页面上呈现。应用程序代码以及下面的问题，我想让它，在点击按钮，映射的问题被呈现
const [start, setStart] = React.useState(true)
console.log(start)
function renderNextPage() {
setStart(false)
}
const [request, setRequest] =
浏览 7提问于2022-07-13得票数 1
回答已采纳
1回答
如何映射智能契约中的数据
、、、、
因此，我正在读取智能契约中的数据，并试图将其映射到前端显示，但它始终返回一个错误
data is undefined
我会在下面发布我的代码，我真的很期待一些帮助
import React , { useState , useEffect , Fragment } from 'react';
import {Link} from 'react-router-dom';
import { Tab, Tabs, TabList, TabPanel } from 'react-tabs';
import 'react-tabs/style/r
浏览 4提问于2022-08-25得票数 2
回答已采纳
从今天开始学习react，我遇到了一个可能与JS相关而不是实际反应的问题。
import React, { useState } from "react";
import Counter from "./counter";
function Counters() {
const [counters, setCounters] = useState([
{ id: 1, value: 4 },
{ id: 2, value: 0 },
{ id: 3, value: 0 },
{ id: 4, value: 0 },
])
浏览 0提问于2020-12-23得票数 1
回答已采纳
我正在尝试从我的firestore数据库中呈现一个产品列表。我可以获取项目，但不能显示它们。如何在react中显示来自firebase的数据？
这是我的控制台日志显示的错误消息：
react-dom.development.js:13231未捕获错误:对象作为React子级无效(找到:具有键{描述，名称，数量}的对象)。如果您打算呈现一个子级集合，请改用数组。
import Firebase from "../FireBase";
import { useEffect, useState } from "react";
const TechP
浏览 13提问于2021-02-24得票数 0
回答已采纳
3回答
在反应中如何在硅化之间切换
、、、、
考虑一下，我有一个像这样的App组件：
import React from "react";
import Component from "./component";
function App() {
const array = [
{ key : 1 } , { key : 2 } , { key : 3 } , { key : 4 }
]
return (
<div>
{array.map( (item) => {
<Component key={i
浏览 4提问于2020-11-24得票数 1
回答已采纳
我正在循环基于许多数组创建的几个组件。当我单击delete时，这会减少数组的数量，从而减少组件的数量。
FooList.tsx
import React, { useState } from "react";
const FooList = props => {
const [number, setNumber] = useState("");
const deleteArray = () => {
// Remove the component that was clicked
props.setArray(prev =
浏览 3提问于2019-10-06得票数 1
回答已采纳
1回答
背景:我正在学习一个正式的React教程(https://reactjs.org/tutorial/tutorial.html)，但使用的是ReasonML (ReasonReact v.0.9.1)。这是个井字游戏。经典的游戏是在3x3的棋盘上玩的，我已经让它工作了，但现在我试图将它扩展到任意大小的正方形棋盘。我的3x3硬编码电路板代码如下： let renderSquare = (...) =>
<Square ... />;
[@react.component]
let make = (~onClick, ~squares, ~winner) => {
.
浏览 23提问于2020-07-29得票数 1
回答已采纳
我希望计算组件的高度，并在页面加载和调整大小时将其发送给其父组件。
我正在使用下面的可重用钩子来成功地测量header组件中div的高度。但是，如何将从子组件中的height计算出来的useDimensions作为headHeight发送给其父组件
测量钩
import { useState, useCallback, useEffect } from 'react';
function getDimensionObject(node) {
const rect = node.getBoundingClientRect();
return {
width:
浏览 4提问于2022-04-20得票数 0
回答已采纳
我是个新手，不确定为什么会收到这个错误。我在map方法中为每个列表元素分配了一个键，但仍然收到一个错误，提示每个元素都应该分配一个键。下面是我的代码： import React, { useState, useEffect } from "react";
import "./App.css";
const namesURL = "http://api.names.com/search/names";
function App() {
const [names, setNames] = useState([]);
useEffect
浏览 8提问于2021-10-03得票数 0
回答已采纳
1回答
我想根据P_Gamestate属性显示/隐藏JSX的一部分。如果这正在进行中，我们将只显示我们单击的组件。否则其他一切都应该被隐藏起来。这很困难，因为.map()引用了播放列表中的所有元素。我怎样才能做到这一点？目前，它将隐藏我单击的组件，但其他所有内容都将保持显示。
challenges.js：
export default function Challenges()
{
const [P_gameState, P_setGameState] = useState(GAME_STATE.BEFORE);
useEffect(() => {
async
浏览 2提问于2020-04-12得票数 0
我的目标是根据单击的列对表的数据进行排序。为了实现这个目标，我需要将点击的关于header的信息从child component "Table"传递给parent component "App“。
这是来自child component Table的：
const [keyclicked, setKeyclicked] = React.useState("");
const [sortOptions, setSortOptions] = React.useState({
first: "",
second: &#
浏览 9提问于2022-05-18得票数 0
5回答
我正在构建排序算法可视化器，在返回过程中，我创建div来表示垂直条，在animatedBubbleSort()中，我在超时时交换状态数组中的值，数组正在排序，但我希望发生的是，每当状态用updateArray()更改时，将重新呈现.map函数。但是.map函数一点也不重新启动.
import React, { useState } from "react";
import "../styles/App.css";
import { Header } from "./Header";
export default function Sorting
浏览 9提问于2020-02-17得票数 15
回答已采纳
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
1回答
我正在做一个ReactJS项目。在这里，我遇到了一个react-router-dom的问题。经过几次导航后，我的屏幕变白了。 以下是我的Router.js文件： // Routes.js
import React from 'react';
import { Switch, Route } from 'react-router-dom';
import Category from "./Category";
import ProductDetails from "./ProductDetails";
import Contac
浏览 7提问于2020-04-26得票数 0
回答已采纳
我犯了这个错误。我不知道如何解决，我在互联网上没有看到合适的解决方案。我刚开始打字，所以我不知道怎么解决这个问题。最初，该项目是在js上进行的，因此它将使用ts迁移转移到ts。现在我正在纠正由于转移引起的错误。
错误码：
TS2769:没有与此调用匹配的重载。--
Overload 1 of 2, '(props: BrowserRouterProps | Readonly<BrowserRouterProps>): BrowserRouter', gave the following error.
Type '{ children: (stri
浏览 20提问于2022-09-19得票数 2
1回答
useEffect不知道状态更新
、、、、
在更新useEffect中的状态时，我面临重复元素的问题，我试图做的是从防火墙中获取数据，遍历数据并使用useState更新数组，如果数组中已经存在该元素，则跳过添加该元素并移到下一个元素。代码如下
import React, {useState, useEffect} from 'react';
import {View, FlatList} from 'react-native';
const Users = props => {
const [users, setUsers] = useState([]);
const [isLoading, s
浏览 5提问于2021-03-31得票数 0
回答已采纳
我们可以在多个时间使用useState()，还是在React中的单个组件中使用它有任何限制。
浏览 10提问于2022-07-11得票数 2
回答已采纳
import React, { useState } from "react";
function HookCounter() {
const [count, setCount] = useState(0);
return (
<div>
<button onClick={() => setCount(count + 1)}>Count {count}</button>
</div>
);
}
export default HookCounter;
每次需要重新渲染时，React
浏览 1提问于2019-11-08得票数 9
这是我的代码：
import React, { useState } from "react";
import { CKEditor } from "@ckeditor/ckeditor5-react";
import ClassicEditor from "@ckeditor/ckeditor5-build-classic";
const Followups = () => {
const [clicked, setClicked] = useState(false);
const [text, setText] = useSt
浏览 4提问于2021-09-08得票数 2
回答已采纳
1回答
我正在尝试用一些简单的待办事项从我的数据库中获取一些数据。然而，我似乎不能将它们映射到我的网站上的列表中。
我一直收到这样的错误: todoFromServer.map不是一个函数，或者todoFromServer不是一个数组，等等。
我当前的代码如下所示：
import apiFacade from "../api/apiFacade";
import React, { useState, useEffect } from "react";
import {Form, FormGroup, Label, Input, Button} from "rea
浏览 16提问于2020-11-16得票数 0
回答已采纳
我正在使用下面的代码在React Native...it中显示一个带有按钮的'Home‘页面，没有任何困难： import React, { useState } from 'react';
import { Button, Text, TextInput, View } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-
浏览 27提问于2020-06-14得票数 0
回答已采纳
我是React的新手，当我在迭代器react/jsx- <button onClick={addComment} className='add-btn'>+</button>中为元素按下缺少"key“属性时，我试图清除输入 import React, { useContext, useState } from 'react';
import ContentHeader from './PatientHeader';
import { PatientContext } from '../App';
浏览 94提问于2021-07-16得票数 0
我正在使用Typescript和React Native，但我在控制台上遇到了错误。它显示“此表达式不可调用。'Boolean‘类型没有调用签名。”代码很简单，它在主页上只有两张卡片，如果用户单击其中一张卡片，它应该会将用户转到该页面。为了更好地理解钩子，我试图通过useState实现这个低谷。这是home.tsx中的代码： import { Button, StyleSheet, Text, View } from "react-native"
import CardsComponent from "../../components/cards/cards
浏览 254提问于2021-08-27得票数 0
回答已采纳
1回答
我有以下反应成分：
import React from "react";
import { useState, useEffect } from "react";
import { TailSpin } from "react-loader-spinner";
function Pokemon({ name, url }) {
const [data, setData] = useState(null);
useEffect(() => {
fetch(url)
.then((r) => r.json(
浏览 5提问于2022-04-06得票数 0
1回答
我拿到了这个：
import React, { useState, useEffect } from 'react';
import axios from "axios";
function InsideRacesComponent() {
const route = "http://localhost:4000/api/standings";
const [data, setData] = useState([{ raceName: "", raceCountryFlag: "" }]);
浏览 2提问于2020-12-28得票数 0
回答已采纳
我正在尝试与processmaker的API交互。我制作了一个简单的表单来进行身份验证并获取授权令牌，这是与API的其余部分进行交互所必需的。
登录后，我可以使用令牌输出已创建项目的json响应。响应是一个对象数组。
我需要获取一个api请求的prj_uid，所以我想提取这些内容，但我使用map的运气很差。
如何遍历响应并获得数组中每个对象的prj_name和prj_uid？
import React, { useState, useEffect } from "react";
//import ResponsiveEmbed from "react-responsiv
浏览 0提问于2019-08-15得票数 0
1回答
其思想是显示ward_no数组中所有ward_no键的值。我想了解为什么图像中的下拉列表只显示了3(6，10，15)值，而不是所有的整数i.15。此外，在div中列出这些值的模式也超出了我的理解范围。要确保在名为div的ward_option中填充所有值，我需要做什么？此外，对异常现象的解释也将是非常感谢的。JSON和代码如下：
JSON
[
{
"district": "Kolkata",
"ward_no": [
{
"ward&
浏览 2提问于2021-11-22得票数 2
回答已采纳
我有一个用按钮加载一些数据的组件。我有一个通过ID获取按钮的函数，并将状态/变量更新为该按钮值，然后根据该值加载数据。但是，因为所有的按钮ID都是相同的，所以它只对第一个按钮有效…… 我不确定如何为每个按钮设置唯一did，因为它们是通过map()函数生成的，即使我知道，我也不确定我的函数如何在不为每个按钮编写函数的情况下针对每个按钮…… 编辑:我现在已经为按钮设置了唯一的I，还需要解决其他问题。 return member.map((player, index) => (
<>
{" "}
<React.Fragme
浏览 43提问于2021-07-20得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频活动推荐
腾讯云开发者
