如何在react中显示map中特定键上的div元素
在React中显示map中特定键上的div元素可以通过以下步骤实现：
- 首先，将数据存储在state中。可以使用useState钩子来创建一个状态变量，将map数据存储在该状态变量中。
- 创建一个map函数，遍历数据数组，并返回一个包含特定键上div元素的新数组。
- 在组件的render方法中，调用map函数并将返回的新数组插入到JSX中。
以下是一个示例代码：
import React, { useState } from 'react';
const MyComponent = () => {
const [data, setData] = useState([
{ id: 1, name: 'John' },
{ id: 2, name: 'Jane' },
{ id: 3, name: 'Bob' },
]);
const renderDivElements = () => {
return data.map((item) => {
if (item.id === 2) {
return <div key={item.id}>This is a div element for {item.name}</div>;
}
return null; // Return null for other items
});
};
return <div>{renderDivElements()}</div>;
};
export default MyComponent;在上面的示例中，我们创建了一个包含三个对象的数据数组。然后，我们使用map函数遍历数据数组，并检查每个对象的id。如果id为2，则返回一个包含div元素的新数组。最后，在组件的render方法中，我们调用renderDivElements函数来显示特定键上的div元素。
请注意，在此示例中，并没有提及任何具体的云计算品牌商的相关产品。这是因为问题的焦点是如何在React中显示特定键上的div元素，与云计算无关。
相关·内容
第一次问一个问题，所以请赤裸裸的与不良的格式。
我很抱歉每个人都是为了最初的职位而来的。这是一个简单的问题形式。
import { add, format } from "date-fns";
import React from "react";
function TasksPage() {
const daysArray = Array(10)
.fill()
.map((_, idx) => add(new Date(), { days: idx }));
return (
<d
浏览 2提问于2022-04-11得票数 -1
回答已采纳
1回答
我想知道重用从一个组件到另一个组件的react是正常的。在Row组件中，我从列组件中获取了key，并将其用于映射Row子程序
const Table = props => {
const { data, children, showHeader } = props;
return (
<div className="table">
{showHeader && <TableHead children={children} />}
{data.map(data => {
浏览 1提问于2019-10-21得票数 2
回答已采纳
我想在我的列表中添加一个字符串，并且我有一个与HelloWordComponent不同的HelloWordComponent，我将1设置为“微软”，2为“FaceBook”，3为“react”；当我将“yahoo”添加到列表的第一位时，“yahoo”的计数器设置为1，然后将react设置为0。
我知道我必须使用唯一的密钥，我认为{name}是合格的，但我不知道在哪里确切地使用key = {name}？
class HelloWordComponent extends React.Component {
render() {
return <div>{this.pro
浏览 0提问于2019-07-20得票数 4
回答已采纳
下面是简单的App.js代码：
import React from 'react'
import Member from './Member'
function App () {
const members = [
{ name: 'Andy', age: 22 },
{ name: 'Bruce', age: 33 },
{ name: 'Mary', age: 11 }
]
for (const member of members) {
return <Mem
浏览 15提问于2020-06-02得票数 0
我试着用不同的图像制作一个网格，这个想法是它会在对象中循环并形成网格，但是它根本不起作用。
这些对象是：
export const Projects = [
{
id: 1,
name: 'Site 1',
tech: [
'HTML',
'CSS',
'SASS',
'React'
],
description: 'Lorem',
image: './assets/cv.svg'
浏览 0提问于2019-11-07得票数 0
回答已采纳
你好，我有一些数据，我正在尝试用react显示，看起来像这样
Poll数组中有一个选项数组。当我已经在映射轮询数组时，如何使用react显示选项数组？这就是我到目前为止所知道的：
renderPost(posts){
return posts.map((post) => {
return (
<div>
<h3>{post.question}</h3>
</div>
);
});
浏览 10提问于2017-01-18得票数 1
回答已采纳
我试图使用.map将数组项传递给特殊组件。
我已经干了好几天了，我真的很想通过这个考试。每次我呈现并上传到浏览器时，它都会给我一个错误
列表中的每个孩子都应该有一个独特的“钥匙”道具。
import React from "react";
export const SpecialButton = (props) => {
const { special } = props
return (
<>
{<button>{ special }</button>}
</>
);
}
浏览 0提问于2019-09-08得票数 1
在Reactjs中，使用React.Children.toArray方法修复警告是否可以：
Warning: Each child in a list should have a unique "key" prop.
例如：
React.Children.toArray(myArray.map(value => <div>{value}</div>));
上面的代码似乎修复了警告，但我想知道这是否是一种良好的实践。
浏览 10提问于2022-02-22得票数 0
3回答
我正在尝试创建一个简单的CRUD MERN应用程序。在此应用程序中，数据显示在我的控制台中，但我希望它出现在我的UI部分中。
下面是控制台日志：
这是Alluser.js文件，我想在这里显示来自后端的控制台数据：
import React, { useEffect, useState } from "react";
import { Link } from "react-router-dom";
import { getUsers } from "./api";
const UserData = () => {
const [u
浏览 1提问于2021-12-02得票数 1
回答已采纳
我正在构建一个react，它显示一个项目列表(组件名为'el')。我希望每个项目都包含一个唯一的键，它只是一个计数器(在这里称为“秩”)，应用程序会对每个项进行递增。我目前正在成功地将排名作为映射中的关键，但我不知道如何增加它，因此它对每个映射都是唯一的。这个是可能的吗？我应该使用某种类型的for循环而不是map()吗？
class App extends Component {
constructor() {
super();
this.state = {
someList:[/*Some List of Elements*/],
浏览 1提问于2018-11-25得票数 1
回答已采纳
在React中，我有两个按钮正在呈现，并且我收到了这样的警告：
警告:数组或迭代器中的每个子元素都应该有一个唯一的“键”支柱。
这是我的代码：
import React, { Component } from 'react';
import Content from './HomeItem';
import { Container, Row } from 'reactstrap';
import 'bootstrap/dist/css/bootstrap.min.css';
const HomePage = props
浏览 0提问于2018-10-30得票数 1
回答已采纳
import React from 'react';
import {Jumbotron} from 'react-bootstrap';
import axios from 'axios';
import './App.css'
export default class Form extends React.Component{
state={
user:[],
firstname:'',
lastname:'',
}
handleChange = event =>
浏览 0提问于2018-03-22得票数 4
我正在用ReactJS构建一个看板应用程序，用户可以在其中添加一张“卡片”到三个不同的“列”(Todos、Onprogress和Done)。我遇到的问题是，应该在卡片中显示的内容没有像它应该显示的那样显示，尽管我的状态返回它的对象很好(当我console.log所有东西时)。我认为问题是我将一个对象推入一个数组，然后将其作为值添加到状态中的一个键中，因此当我使用props传递数据时，我的数据不能被正确读取。我将在下面分享我所有的代码库。
这是我的App组件：
import React, { Component } from 'react';
import Column
浏览 4提问于2019-07-30得票数 1
1回答
我有问题渲染页面基于存储在redux中的模板数组。我无法提供实际的代码，因为它太复杂，无法在沙箱中重现，但我会尝试简化结构。
我有pinterest样式的网格，基于flex-grow和js计算每个项目的尺寸，所以我需要将所有这些都放在一个容器中。
我在同一个div中有3组项目：
blank_item + templates.map + tailItems.map
<div className="grid">
{shouldRenderBlankItem && <BlankItem />}
{templates.map((t
浏览 0提问于2020-10-16得票数 1
我正试图在我的“反应”应用程序中消除这个警告：
Warning: Each child in a list should have a unique "key" prop.
Check the render method of `SettingRadioButtonGroup`. See https://reactjs.org/link/warning-keys for more information.
at div
at SettingRadioButtonGroup (http://localhost:3000/main_window/index.js:
浏览 6提问于2021-02-15得票数 2
回答已采纳
我有一个名为“类别”的文档(智能模式)，它包含一个名为“contained_set”的数组，该数组引用了另一个名为“set”的正常模式文档。
例如，“展览”类别有一个字段，我可以从中选择其他集合('place a'，'place b'，'place c')。我有超过一个“类别”文件。下面是第四类的一个例子(6种中的一种)：
我的图库页面工作良好，我可以轻松地获取“类别”类型的数据，但我需要一个页面，该页面可以链接到一个新的网页，该网页显示所选类别的包含集。到目前为止，这是我的set.js文件，我试图添加一个键，但是我仍然得到相同的错误(错误
浏览 13提问于2022-09-10得票数 0
我正在尝试创建一个带有删除按钮的购物清单，但当我单击它时，其他项目被删除，以前的值仍然保留在屏幕上，即使第二次删除也是如此。请假设自定义按钮和图标已经是单独的包，代码如下： import React, { useState } from 'react';
import { CButton, CDeleteButton } from '@custom/pkg';
const ShoppingList = () => {
const [state, setState] = useState(
[{ name: 'Apple
浏览 86提问于2021-08-21得票数 1
回答已采纳
(发送todo作为toDo -我认为问题在这里，但不知道解决办法)
todos.js文件
import React from 'react'
import {Todo} from './todo';
export const Todos = (props) => {
return (
<div className='container'>
<h3>Todo List</h3>
{props.toDos.map((todo) => {
return
浏览 3提问于2022-02-26得票数 -1
我试图显示存储为userList状态变量的数据。我试图从每个对象中map每个对象并显示name和email参数，但是它不会在网页上显示任何内容，我只能使用console.log()看到数据。我使用displayUsers()显示用户，并使用getAllUser()从API端点获取数据。我认为我的displayUsers()函数是错误的。代码：
import React, { Component } from 'react';
import axios, { post } from 'axios';
class App extends Component {
浏览 0提问于2018-05-03得票数 0
回答已采纳
我是React的新手，我正在尝试使用JSX语法，结合state/ props和纯Javascript。
我将道具从父组件(App)传递给子组件(Character)。其中一个道具是一个数字数组，当子组件被呈现时，我试图将其打印到页面中的段落中。我想出了如何打印所有其他道具(要么是字符串，要么是数字)，但我找不到季节数组的解决方案。我可以使用forEach循环将数组的所有元素打印到控制台，但是我不知道如何将结果集成到JSX中。我想让子组件的最后一段读成
季节: 1、2、3
或者数组有多少个数字。
编辑:我希望每个打印的季节都是一个单独的元素(例如链接)，而不是将数组转换为一个字符串，即
浏览 20提问于2019-11-20得票数 0
回答已采纳
1回答
我正在尝试创建一个嵌套的map，但是我得到了一个未定义的错误。
因此，我将profile属性传递给位于navbar.jsx，profile: this.state.profile的Link路由器。然后，我在profilePage.jsx中获取数据，希望在其中传递元素中的数据。
Profile json有3个组件：->经验、教育和技能。所以我需要一个嵌套的循环，让数据显示在元素中。例如，调用`{experience.company}以便显示公司名称。
当我调用配置文件页面时，在控制台中，我看到profile.experience被调用，但随后它变得未定义：
(3) [{...}, {...
浏览 13提问于2018-08-03得票数 3
在我的D.R.Y上工作。我试图把父母的数据传递给一个子组件，这样我可以重用子组件。考虑到父组件，我有：
<Child data="data">
<svg viewBox={'0 0 500 500'}>
<path d="path" />
</svg>
<p>This is some text</p>
</Child>
Child.js：
import React from 'react'
import Foo from
浏览 2提问于2021-02-26得票数 1
回答已采纳
1回答
我不会扩展组件类，而是尝试使用usestate来管理状态。现在，我希望在特定条件下向方法personList中的togglePersonsHanler变量添加person组件。我希望添加一个HTML标记列表，如下所示
<person name="person1" age=31>
<person name="person2" age=26>
<person name="person3" age=35>
但是在控制台日志中，我得到了如下所示的personList
{$$typeof: Symbol(react.el
浏览 4提问于2020-03-22得票数 1
回答已采纳
我试图在React中更新特定的inputfield / selectfield值。这是我的代码：
import React, {useState} from 'react'
const FoodScreen = () => {
const [qty, setQty] = useState(0)
return (
<div className='row gy-2'>
{filteredProducts &&
filteredProdu
浏览 0提问于2021-01-28得票数 1
我是新的反应和学习如何制作一个Todo应用程序。我需要知道如何在单击复选框输入时删除待办事项，并在受控环境中再次单击(切换)取消交叉操作。我已经投入了我的研究，问题是，每个人似乎都在使用索引，而我听说没有使用索引，因为它会导致问题。任何帮助都将不胜感激；下面是我的代码：
App (父组件)
// dependencies
import React from 'react';
// local files
import './App.css';
import List from '../components/List';
class App ex
浏览 1提问于2020-06-12得票数 1
回答已采纳
我试图显示一个表，该表从服务器获取数据并显示其中的所有信息。代码正在从获取的API打印我的表头和第一个对象的信息。
这给了我一个错误。
警告:数组或迭代器中的每个子元素都应该有一个唯一的“键”支柱。检查MyTable的呈现方法“
import React from "react";
export default class MyTable extends React.Component {
constructor(props) {
super(props);
console.log(props);
}
createTable = ()
浏览 0提问于2018-07-10得票数 0
回答已采纳
我正在学习react，我被困在如何在this.state中呈现生日的问题上。我想我应该使用这样的东西：
{this.state.birthdays}
但这似乎不是每个生日都能达到的。我的getElementByID等于一个存在于我的超文本标记语言中的容器。任何建议/帮助都是很棒的！
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
birthdays: {
浏览 3提问于2016-09-17得票数 0
回答已采纳
我有一个本地JSON文件，我已经将其转换为Javascript。 我可以通过将JS文件导入到我的App.js中来获取数据。 这是我的App.js文件： import React, { Component } from "react";
import CardData from "./data/db";
import "./App.css";
class App extends Component {
constructor() {
super();
this.state = {
CardData
};
浏览 16提问于2019-02-21得票数 1
回答已采纳
我在React中创建了一个简单的待办事项列表，即使我有一个key属性，我仍然收到错误“列表中的每个孩子都应该有一个唯一的"key”prop。“
这是我的JSX：
<div className="list">
<ul>
{updatedList.map((item, index) => {
return (
<div>
<li key={index}>{item}</li><butto
浏览 0提问于2020-05-07得票数 0
4回答
我正在尝试构建一个从JSON源获取信息的React组件，并使用其中的一些信息来创建可以传递到其他独立组件中的状态。虽然我还没有将我的状态传递到单独的组件中，但是我已经能够让我的状态使用来自JSON的信息来更新。但是，当我加载我的页面时，我会得到一个错误代码，在继续我的项目之前，我会得到一个错误代码，以防在我的代码中留下错误会产生意外的副作用。错误代码如下：
index.js:1警告:列表中的每个孩子都应该有一个唯一的“键”道具。
检查FetchData的呈现方法
在div (at FetchData.js:27)
在FetchData (at App.js:8)
在div (at App.j
浏览 4提问于2020-07-25得票数 0
回答已采纳
本人是图书馆管理系统的初学者和实施者。所以我有一个名为BookDetails.js，BookList.js的组件。BookDetails包含输入标题和描述的表单。在提交表单时，I得到一个警告:列表中的每个孩子都应该有一个唯一的“键”道具。从图书细节的显示功能。那么，我应该添加什么来显示输入的表单数据。下面是我的代码：BookDetails.js
import React, { useState } from 'react' import './BookDetails.css'
const [bookTitle, setbookTitle] = useS
浏览 11提问于2022-05-08得票数 0
1回答
我想要一个文字动画动画，动画每一个法术。
动画数据源来自数组。
动画是基于键触发的。(在反应和框架运动中)
另外，如果没有消息>>警告:列表中的每个子项目都应该有一个唯一的“键”支柱。
如果我尝试用索引解决惟一的密钥问题，错误消息就会扩展，但是问题仍然是>> ，而不是动画。
因此，建议其他开发人员使用唯一键，但不使用索引.。
好吧，我用唯一的钥匙，每一个咒语。
但问题是有“外映射函数或div”，我只使用索引。
我的动画接受这个数据形式:数组中的数组，所以在word中拼写
所以这行的问题
<div key={index} >
我认为
但我打开了另一个解决方
浏览 4提问于2022-03-26得票数 0
回答已采纳
2回答
我已经将一些dummyData (1000个电影对象)导入到我的React.js组件中，并且我想呈现标题。
export const dummyData = [
{
id: 'tt0111161',
rank: '1',
title: 'The Shawshank Redemption',
}
我创建了一个包含整个对象的数组，并希望显示前3部电影。
const likedFilms = [];
for (let i = 0; i < 3; i++) {
likedFilms.push(dummyDat
浏览 4提问于2020-11-21得票数 0
回答已采纳
import React from 'react'
export default function CurrencyRow(props) {
const {
currencyOptions
} = props
return (
<div>
<input type="number" className="input-box" />
<select>
{currencyOptio
浏览 5提问于2021-12-14得票数 0
我正在做我的第一个reactjs应用程序，我遇到了一些麻烦。这是我从基本文件中调用的功能(子)组件。
var ReactDOM = require('react-dom');
var React = require('react');
var ConfigurationService = require('../configurationService');
class Feature extends React.Component {
constructor(props) {
super(props);
this.s
浏览 7提问于2017-05-05得票数 2
回答已采纳
1回答
在React中，我尝试使用创建一个基本的网格。
我已经创建了两个矩形，并为它们提供了如下布局：
<ReactGridLayout layout={{x:1, y:1, w:5, h:10}}>
<div key={1} style={{width: "500px", height: "100px", border: "1px solid #000", bgcolor: "blue", color: "green"}}>
Rectangle 1
</div>
浏览 0提问于2016-02-04得票数 2
我将实现一个组件，它在框中显示数据。每一个常量的数据都应该放进一个div中返回。
我有一个Box组件，它显示数据。在教程组件中，我们有包含数据数组的道具：
//Box component
import React from 'react'
import { Link } from 'react-router-dom'
const Box = ({ item, index}) => {
return (
<div key={index}>
<div className="tutor
浏览 0提问于2019-09-16得票数 4
回答已采纳
解决这类问题的最佳方法是什么？
我试图使用ReactJS的链接(Router)--一个按钮将重定向到另一个页面"DadosEmpresaPage“到"SelecaoPlaenoElegibilidade"，但是它给了我的ComponentSelector一个错误，现在它被修复了，我只需要做一个”列表“来呈现我的组件？
我的index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
//
浏览 7提问于2022-04-15得票数 1
回答已采纳
3回答
我有一些简单的组件来选择地图上的点，然后显示与这一点相关的一些GeoJSON数据：
import React, { Component } from 'react';
import { Map, Marker, TileLayer, GeoJSON } from 'react-leaflet';
import 'leaflet/dist/leaflet.css';
import { connect } from 'react-redux';
import './style.css';
import { set
浏览 5提问于2017-05-24得票数 18
回答已采纳
在我的应用程序中，我目前正在收到反应警告：
警告:列表中的每个孩子都应该有一个独特的“键”道具。
检查GetReplies的呈现方法。
这是GetReplies方法：
export function GetReplies(props) {
const Id = props.Id;
const replies = allComments.filter(obj => obj.ParentCommentId === Id).
sort((objA, objB) => new Date(objB.Time) - new Date(objA.Time));
浏览 7提问于2022-08-16得票数 1
回答已采纳
2回答
有关在react中获取嵌套数据的问题。
API接口
能够获取帖子列表。现在，当单击post时，要获取注释列表。
以下是目前为止的代码
import React, { useEffect, useState } from "react";
import Post from "./Post";
const [posts, setPosts] = useState([]);
const [comments, setComments] = useState([]);
function App() {
const [posts, setPosts] = useS
浏览 1提问于2021-05-31得票数 0
回答已采纳
1回答
我正在和React和Realtime Database一起工作。
以下是与此问题相关的两个主要数据库节点：
以及：
以下是有关守则：
class App extends React.Component {
constructor(props) {
super(props);
firebase.initializeApp(config);
this.state = {
commandes: []
};
}
componentDidMount() {
this.getData();
}
getData
浏览 3提问于2021-11-03得票数 0
回答已采纳
2回答
目前，我正在制作一个系统，可以控制家庭电器设备在网上。后端已经准备好了，我创建了一个页面来显示所有设备的列表，但是当我尝试从那里创建一个详细的页面时，我感到很困惑。
如何编写它，以便只有在DeviceList.js (设备列表页)上单击的设备的详细信息可以用CameraDetail.js显示？
可以通过API获得的信息如下。(仍然有各种各样的设备，但我现在只展示相机。)
Json
"attributes": {
"camera": [
{
"entity_id": &
浏览 10提问于2022-09-04得票数 0
我有一个更大、更复杂的组件，没有我所期望的那样，我把它缩小到了一个更简单的组件：
import React, { useState, useRef } from "react";
import ReactDOM from "react-dom";
function App(props) {
const [history, setHistory] = useState([props.arr]);
const [currentHistoryIndex, setCurrentHistoryIndex] = useState(0);
const items
浏览 2提问于2019-09-14得票数 0
回答已采纳
3回答
我只是想把我的数组的列表打印到另一个div中。它似乎不起作用。代码如下
import React from "react";
import "./navbar.css";
class Navbar extends React.Component{
render(){
const categories = ["Art", "Films", "Brands", "Restaraunts"];
var categoryList = categories.forEach(functio
浏览 7提问于2020-05-04得票数 0
1回答
我正在创建一个React元素集合并显示它们；下面是一个简单的示例，它仅用于框架问题。
var c = [
<div>A</div>,
<div>B</div>,
// ...
<div>Z</div>
];
var ListComponents = React.createClass({
render: function() {
return <div>{c}</div>;
}
});
ReactDOM.render(<ListCompone
浏览 4提问于2016-04-20得票数 0
每次单击加号图标时，我都会添加一个新的输入，但它总是将其添加到末尾。我希望它被添加到被点击的项目旁边。
这是我使用过的React代码。
const Input = props => (
<div className="answer-choice">
<input type="text" className="form-control" name={props.index} />
<div className="answer-choice-action">
浏览 2提问于2018-05-13得票数 1
2回答
我想了解这个密码的结果。我认为这与反应“钥匙”有关。“
const {useState} = React;
/*export default*/ function App() {
const [alphabets, setAlpabets] = useState([
{ key: "b", name: "b2" },
{ key: "b", name: "b" },
{ key: "a", name: "a1" },
{ key: "a",
浏览 4提问于2022-01-27得票数 1
根据React的正式文档，如果数组中的任何元素被添加、删除或修改，则需要使用关键属性来让React知道。所以假设我在呈现函数中有一个嵌套的for循环。
如果我们有
parents.map((each, index)=>{
return(
<div key={index}>
each.map((number, i)=>{
return <Child number={number} key={i} />
})
</div>
浏览 7提问于2022-11-13得票数 0
我想向我的元素添加一个相似的按钮，我通过一个forEach从一个API调用创建元素。因此，我导入了一个类似的按钮，作为一个组件，并尝试将它添加到卡片中，如下所示：
import LikeBtn from "./LikeBtn/LikeBtn";
const likeBtn = document.createElement("span");
likeBtn.className = "imgcards__like-btn";
likeBtn.innerHTML = LikeBtn;
但它就是这样出来的：
LikeBtn组件和代码的其余部
浏览 7提问于2022-01-18得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM活动推荐
腾讯云开发者
