尝试在React中迭代URL数组？
在React中迭代URL数组可以使用map()方法来实现。map()方法可以遍历数组中的每个元素，并返回一个新的数组，其中包含根据每个元素进行处理后的结果。
以下是在React中迭代URL数组的示例代码：
import React from 'react';
function App() {
const urls = [
'https://www.example.com',
'https://www.example2.com',
'https://www.example3.com'
];
return (
<div>
{urls.map((url, index) => (
<a key={index} href={url}>{url}</a>
))}
</div>
);
}
export default App;在上面的代码中，我们定义了一个名为urls的数组，其中包含了三个URL。然后，我们使用map()方法遍历urls数组，并为每个URL创建一个<a>标签。注意，我们为每个迭代的元素设置了一个唯一的key属性，这是为了帮助React进行元素的识别和更新。
这样，当我们渲染App组件时，就会生成一个包含了三个链接的<div>元素。
关于React的更多信息和学习资源，你可以参考腾讯云的React产品介绍页面：React产品介绍。
相关·内容
1回答
react js中嵌套对象的排序
、、、、
下面是一个URL。
每个键都包含一个对象。里面也有一个物体。我想要的都是从最大到最小的伊斯兰堡Serena酒店的正面价值。
我尝试了一些东西，但失败了，我需要专家来跳进去，引导我度过难关。
在react js中对嵌套对象进行排序。
浏览 2提问于2022-12-02得票数 -1
1回答
我正在尝试让我的代码显示来自ex的const url的用户数据。"name“和"username”。但是，当我尝试在本地环境中预览它时，没有显示任何内容。有没有人能帮我编个代码让它正常工作。谢谢。 import React from "react";
export default class FetchRandomUser extends React.Component {
state = {
loading: true,
person: null
};
async componentDidMount() {
const
浏览 9提问于2020-10-02得票数 0
回答已采纳
我正在学习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
回答已采纳
1回答
嘿，各位，我正在尝试使用上下文API来管理状态，在不可能传递道具的地方呈现一个徽章。目前，我正在尝试使用setUnreadNotif设置器，但这似乎是因为我使用它的方法循环遍历数组，而数组并不像预期的那样工作。当只调用setUnreadNotif(true/false);时，我已经成功地更新了布尔值，因此我知道它可以工作。我尝试过许多其他方法，但都没有成功，这似乎是最直截了当的。我的提供商也在适当地包装应用程序，所以我知道它不是这样的。任何帮助都是非常感谢的。
这里是我的上下文
import React, {
createContext,
Dispatch,
SetStateAct
浏览 5提问于2022-09-18得票数 1
我刚开始在React中编码，我尝试编写一个注释框...However，我得到了TypeError: this.props.comments.map不是一个函数，也没有捕获到TypeError: comments.concat不是一个函数……我有点迷路了，想知道我哪里错了。有没有人能指引我，告诉我哪里出了问题？
这是我的react代码
class Comment extends React.Component{
render(){
return(
<div>
<div className="
浏览 0提问于2017-04-30得票数 1
2回答
我正在尝试使用context来处理应用程序中的部分身份验证。我遇到了问题，因为我试图在我的useContext之外调用Context.Provider，所以我将逻辑转移到提供程序的子组件中。
现在，我收到了一个错误消息TypeError: Object is not iterable (cannot read property Symbol(Symbol.iterator))，其中我在子组件中调用useContext。从上下文或其他方面获取值真的有问题吗？
在app.js中
import AuthContextProvider from "./components/context/au
浏览 3提问于2020-06-13得票数 0
回答已采纳
这是我的代码：
Search.tsx
import * as React from 'react';
import axios from 'axios'
import Suggestions from './Suggestions'
const API_KEY:string = "process.env"
const API_URL:string = 'http://127.0.0.1:9001/v1/test'
export class Search extends React.Component{
st
浏览 2提问于2019-03-10得票数 0
回答已采纳
1回答
我在我的ReactJS应用程序中使用了react传单，我尝试动态创建标记并添加弹出，如下代码所示。但是弹出框没有显示，web开发人员控制台中出现了一个错误。
TypeError:点为空
我使用的是react传单版本2.5.0。敬请指教！
import React, { Component, useState } from 'react';
import { Map as Mapview, TileLayer, Marker, Popup, GeoJSON } from "react-leaflet";
import "leaflet/dist/
浏览 0提问于2019-10-20得票数 2
回答已采纳
我的数据库里有一些记录。代码在表上显示第一条记录。当我想通过appendMore按钮将第二条记录附加到第一条记录时。第二条记录显示第一条记录。请正确地将第二个或下一个附加到第一个记录中。到目前为止，我的努力如下
import React from "react";
import axios from "axios";
import "./App.css";
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
浏览 4提问于2022-06-03得票数 1
回答已采纳
我对js的反应很新鲜，我正在开发一个基本的电影应用程序。我有一个‘添加最爱’组件，它添加了一个电影时，最喜欢点击。
import React from "react";
import React from "react";
const AddFavourite = () => {
return (
<>
<span className="mr-2">Add To Favourites</span>
<svg
浏览 3提问于2022-05-05得票数 2
我一直在使用此方法从数组中呈现多个自定义元素，但这是我第一次使用地图数据结构进行呈现。它编译得很好，但不呈现任何内容。我已经设置了一个代码框。
import "./styles.css";
import React from "react";
import ImageGrid from "./ImageGrid";
interface OnlineImage {
id: string;
url: string;
}
export default function App() {
const [onlineImages, setOn
浏览 2提问于2022-03-23得票数 2
回答已采纳
我在物体上的循环有问题。我解决不了。请帮帮我。
我在一个反应项目，以提高我的技能，并将与反应钩工作。
下面有一个文件，其中包含一个对象。我要从api里拿来。我想在页面上显示我需要的对象细节。
我试过很多方法来解决问题，但它们没有起作用。
我没有添加我尝试过的所有代码，但是下面有一个简单的代码，告诉我我的目标。在React中迭代对象的正确解决方案是什么，JS .
提前谢谢。
import React from 'react';
export default function ValueRef() {
const myList = {
"loca
浏览 2提问于2020-11-15得票数 0
回答已采纳
1回答
我正在调用一个动态api来返回一些值，这个调用返回一个Json，如下所示： {name: "test", resource_group: "group1", location: "westeurope", disk_size: "30 GB", os_type: "Linux", …} let url
const [MachinesRow, setMachinesRow] = React.useState([])
React.useEffect(() => {
resource_group.forEach(
浏览 7提问于2020-01-23得票数 1
回答已采纳
我正在尝试将'Data‘结构元素从apollo钩子调用转换为一个可以在React中传递以呈现的数组。这是我使用'@apollo/react-hooks‘库的钩子调用。const { data, loading, error } = useQuery(findTokenQuery)
如何转换接收到的数据结构元素...{"id":4，"element":"TITANIUM"，"symbol":"TI"}到一个类似{id: 4，element:"TITANIUM"，symbol:"
浏览 1提问于2020-02-25得票数 0
因此，我试图从props.children或React.Children获得一些数据，但我无法做到，这就是我正在做的事情：
console.log(props.children)
这将在控制台上打印这一内容：
[
0: {
$$typeof: Symbol(react.element)
key: "slide-id-0"
props: {section: {…}, onChange: ƒ}
...
}
1: {
$$typeof: Symbol(react.element)
key: "slide-
浏览 2提问于2021-08-09得票数 0
回答已采纳
2回答
我有一个包含这些vars的.env文件：
REACT_APP_API_URL=https://my-enpoint.com/api
REACT_APP_APP_URL=https://my-app.com
ESLINT_NO_DEV_ERRORS=true
REACT_APP_PUSHER_APP_KEY=d83519e4-6017-41f4-b8b2-6093f6480914
...etc
我想检查是否有任何变量丢失，并打印有关指定变量中缺失值的信息。
我尝试在循环中读取文件中的变量，但我无法在循环中访问它们。通过一个一个地获取变量，这是可能的。但我想自动完成。我的代码：
VARIABLE
浏览 21提问于2022-09-20得票数 0
回答已采纳
在promises完成后，我正在尝试使用promise.all()调用3API，按照下面的代码，尝试使用useEffect更新对状态挂钩的响应
import React from "react";
const [responses,setResponses] = React.useEffect([])
const filterResolveData = () => {
const filterTypes = ["grade", "subject", "type"];
const promises =
浏览 4提问于2021-02-16得票数 2
1回答
我一直在学习react，并试图将用户输入从一个页面转到另一个页面。我已经尝试了一些不同的东西，比如refs，props和redux，但我就是搞不明白。我的目标是，当向文本框中插入数据并单击submit时，我可以在第二页上显示这些条目的列表。
这是输入的页面
import React, { Component } from "react";
class New extends Component {
constructor(props) {
super(props);
this.state = {value: ''};
this.h
浏览 0提问于2018-03-12得票数 0
2回答
我刚刚开始学习反应，我正试图找出如何找到一个特定的价值，我正在寻找。就像Ruby中的each.do方法一样，您可以迭代数组，我正在尝试使用React来实现这一点。
class Gallery extends React.Component {
render () {
// debugger;
return (
<div>
<img> {this.props.gallery.thumbnail_url} </img>
</div>
)
}
}
我试图访问thumbnail._url
浏览 3提问于2016-11-22得票数 2
回答已采纳
1回答
反应多项选择题答案组
、、、、
当使用单选按钮时，我得到8个空白的单选按钮。当使用Select时，我得到了8个答案组，但没有文本。我之所以知道，是因为我一直在点击，看看会发生什么。
问题的文本显示正确，所以我不会将其粘贴到下面。我已经包含了广播和选择两种尝试，以了解哪种方法效果最好。
Repo：。非常感谢您的建议。
App.js
import React, { Component } from 'react';
import './App.css';
import Timer from "./Timer";
import Questions from "./Quest
浏览 0提问于2018-12-07得票数 0
1回答
我已经在这个问题上挣扎了一段时间，真的需要解决它。
我正在使用react-dropzone在React-Redux应用程序中设置文件上传。它似乎正常工作，因为它说它已成功发送到服务器，但服务器(Django REST Framework)接收到的似乎是一个空MultiValueDict。但是，请求负载具有以下内容：
------WebKitFormBoundaryWiq9rPvu5bpEoR4X
Content-Disposition: form-data; name="file"
[object File]
------WebKitFormBoundaryWiq9rPvu5
浏览 4提问于2017-12-19得票数 0
回答已采纳
2回答
从Open反应JS -呈现数据
、、、、
我正在尝试使用的数据来显示来自被选中国家的10个污染最严重的城市。但是，我得到了一个错误，上面写着TypeError: this.props.cities.map is not a function，我不知道该如何修复它。我发布了整个代码，因为您可能会发现一些错误，我甚至没有考虑到。
这是我的应用程序文件：
import React from 'react';
import './App.css';
import Input from './components/Input';
import CitiesList from './comp
浏览 3提问于2019-12-15得票数 0
我正在处理redux中的一个博客项目，在该项目中，我从api服务器调用数据，并试图从server.The数据中显示默认数据(就目前而言，我正在尝试检索默认数据，到目前为止还没有将其发布到api服务器)，这些帖子由用户在api服务器的blog.The默认数据上发布，如下所示：
const defaultData = {
"8xf0y6ziyjabvozdd253nd": {
id: '8xf0y6ziyjabvozdd253nd',
timestamp: 1467166872634,
title: 'Udacity is the
浏览 2提问于2017-12-28得票数 2
回答已采纳
我有一个下面的代码，我正在尝试填充React表单中的Dropdown select。
我的渲染组件：
<Form.Control as="select">
{this.state.originCity.map(name => (
<option key={name.CityName} value={name.CityCode}>
{name.CityName}
</option>
))}
</Form.Control>;
我上传到originCity的数据如下：
console.log(&
浏览 13提问于2019-11-05得票数 0
我有以下几点：
var repos = [{"keya":"vala","keyb":"valb"},{"keya":"vala","keyb":"valb"},{"keya":"vala","keyb":"valb"}]
在我的react组件代码中：
var React = require('react');
var Repos = React.createClass({
pr
浏览 3提问于2015-11-29得票数 1
回答已采纳
1回答
给定this代码： const array = ['um', 'dois', 'tres', 'quatro', 'cinco'];
const Task = (value, i) => {
return (
<li key={i}>{value}</li>
);
}
function App() {
return (
array.map((e, i) => {
return Task(e, i);
})
)
} 我注意到，映射此数组
浏览 24提问于2021-08-29得票数 0
1回答
我正在构建一个应用程序，使用Remix，fly.io进行部署。我有一个定制的React useCountdown，它有以下代码：
import { useEffect, useState } from 'react';
const useCountdown = (targetSeconds) => {
const countDownSeconds = targetSeconds
const [countDown, setCountDown] = useState(countDownSeconds);
useEffect(() => {
浏览 7提问于2022-05-28得票数 -1
回答已采纳
2回答
我在我的React应用程序中循环了一些JSON。在我循环的JSON中，我有一个包含多个图像的对象。我想循环通过这些图像，并渲染他们每一个。这是我尝试过的：
const locations = [
{
"name": "First Location",
"photos": [
{
"url": "http://placehold.it/250x250",
}, {
"url": "http://placehold.
浏览 18提问于2019-11-08得票数 1
回答已采纳
2回答
你好，我正在尝试迭代我从我的数据库中获得的一些数据，它是一个对象的对象
this.state.data: {
someGuy:{
cardHeading:"someHeading"
email:"somemail@gmx.de"
begin:"13-02-2018"
end:"15-02-2018"
message:"some Message"
days: "2 Tage"
turnover: 123
url:"some
浏览 22提问于2018-01-03得票数 0
回答已采纳
1回答
我有一个问题要显示我从API中获取的数据，我不知道这里出了什么问题.
我尝试使用map()函数来访问数据，但是它也没有像预期的那样工作
import React from "react";
import axios from 'axios';
const options = {
method: 'GET',
headers: {
Accept: 'application/json',
Authorization: 'API_KEY'
}
浏览 8提问于2022-01-10得票数 0
我正在尝试访问JSONObject数组中的对象并打印它的值。 我可以使用console.log将数组打印为JSONObject。但是我无法访问数组中的值，这些值也是JSONObject格式。以下是我的JSONObject {
"id": 4,
"meta": {
"type": "pagetype",
"title": "Home"
}
},
"title": "Expose data
浏览 16提问于2019-08-26得票数 1
1回答
我有以下组件，我正在尝试传递值
用于我的造型中的线性梯度值。
颜色是一个数组，因此期望它可以按以下方式扩展。
...gradientProps.colors
但这不适用于以下错误：
TS2349:这个表达式是不可调用的。其他类型的“元素”没有调用签名。
新的类型记录和谷歌周围显示，扩展运算符工作在一个数组。
我在这里做错什么了？
interface GradientProps {
angle?: string;
colors?: string[];
}
interface Props {
// 10 other props
gradientProps?
浏览 5提问于2021-04-23得票数 0
回答已采纳
1回答
我不确定如何将数组中的对象呈现到react中。
我的MongoDB模式是
const postSchema = new mongoose.Schema({
userID: { type: String },
dateTime: { type: Date, default: Date.now },
comments: [{
userID: { type: mongoose.Schema.Types.ObjectId, ref: 'User' },
likes: { type: Number, default: 0 },
浏览 6提问于2021-05-24得票数 0
4回答
你好，我在React中实现了一些基本的导航，我有以下代码：
编辑的.js
var Navigation = React.createClass({
getDefaultProps: function() {
return {
navigationItems: [
{ 'id': 1, 'name': 'Home', 'url': '/home' },
{ 'id': 2, 'name': 'About', &#
浏览 2提问于2015-07-16得票数 0
我正在尝试编写我的第一个React应用程序，它应该为不同的输入生成二维码，并在网页上显示它们。 我已经有了自己的“库”函数来为我做这件事--我只将数据作为一个参数传递，它返回一个承诺的数据URL，我将其用作图像的src，然后它就完成了。下面是它现在的工作原理： class App extends Component {
constructor(props){
super(props);
this.state = {
dataUrl: '',
}
}
async componen
浏览 188提问于2019-07-16得票数 1
回答已采纳
这是文件'Search.js‘中的代码 import React, { Component } from 'react';
import * as BooksAPI from './BooksAPI'
class Search extends Component{
constructor(props){
super(props);
this.state={
query:'',
searchedBooks:[],
}
}
updateQuery=(query)=>{
浏览 5提问于2020-07-11得票数 0
回答已采纳
2回答
我一直在尝试进行api调用，并以数组的形式接收返回的数据，以迭代数组并填充react组件。问题是我只是收到了回复的承诺，因此react不会让我使用map函数。我是个新手，在理解这个问题上遇到了困难。 我正在进行如下axios调用： const makeRequest = async (url) => {
return await axios.get(url).then(response => response.data);
} 然后尝试将数组响应保存在要迭代的变量中。 let data = makeRequest("someUrl"); 如果我在请求中有一个c
浏览 4提问于2021-05-05得票数 0
我正在尝试使用来自文件的元数据(如名称、大小等)来创建包含此数据的div。在纯js中，我已经做到了这一点，但我正在学习react。在react中提取这些数据最优雅和最现代的方法是什么？我尝试使用名为.map的react方法，但此代码显示错误。
提前谢谢你。
import React from 'react';
import Map from './components/map/map';
import './App.css';
import Header from './components/header/header';
imp
浏览 2提问于2020-04-20得票数 0
1回答
我已经创建了一个数组，每当每个组件被添加到数组中时，它都会给每个组件提供一个特定的ID。但是现在组件已经创建了，我希望能够提取数据。就像盒或标题一样。
目前，我正在尝试使<textarea />在Todobox.jsx中的值成为唯一的boxid。但它似乎没有打印一个值。
这里是我的代码：
ElementContext.js:
import React, { createContext, useState } from 'react';
import Todobox from './components/Todobox';
export const
浏览 3提问于2022-11-08得票数 0
回答已采纳
1回答
我试图将作为对象的值扩展到react中的状态数组中，但这段代码会导致以下错误：
错误：
TypeError:传播不可迭代实例的无效尝试。为了可迭代，非数组对象必须有一个[Symbol.iterator]()方法.
是否有可能将data数组中的值作为对象扩展到values状态数组中，这样values数组将与data数组相同？
import { useState } from "react";
import "./styles.css";
export default function App() {
const [places, setPlaces] =
浏览 1提问于2022-10-21得票数 -1
回答已采纳
1回答
这是正在获取的json的结构。我正在尝试将一些嵌套的线程数据呈现到一个带有react的网页上。
import react, {useState, useEffect} from "react";
import axios from 'axios'
import ReactJson from 'react-json-view'
const FeaturedBoards = () => {
const [boards, setBoards] = useState([{page: '', threads: {}
浏览 0提问于2021-10-25得票数 1
回答已采纳
我正在尝试打开通过app获取的文档，使用react/node.js应用程序在一个新的浏览器选项卡中发送BLOB数据。该代码适用于应用程序/ pdf，但不适用于任何图像文件，如pdf、jpeg等。在获取数据(ArrayBuffer)后，我将其更改为Blob，然后创建URL。下面是相同的代码。
previewDocument("param1", "param2")
.then((res) => {
const blobWithType = new Blob([res], { type: res.type });
const urlToPre
浏览 4提问于2021-07-01得票数 1
我的问题是，一旦我单击搜索按钮查找空字符串，它应该将moviesSearched的状态设置为movieTitles (所有电影标题的数组)。然而，由于某些原因，它呈现了数组中的最后一个元素，在本例中是Ex Machina，我尝试了很多方法来修复它，但似乎就是找不到解决方案。我猜我在电影过滤器中设置状态的方式是错误的，但我不知道还能做什么。 import React from 'react';
import movies from './movieData';
const movieTitles = movies.map(movie => movie.t
浏览 11提问于2021-08-04得票数 1
回答已采纳
当我使用react和通量完成crud应用程序时，我对React还不熟悉，我得到了这个错误，我的代码如下，
UserList
import React, { Component } from "react";
import $ from "jquery";
import UserStore from "../../stores/UserStore";
import * as UserActions from "../../actions/UserActions";
import AddUser from "./AddUser
浏览 1提问于2019-01-21得票数 0
回答已采纳
1回答
我一直在努力解决这个问题。我能够使用Javascript来完成这个任务，但是无法在React上实现它。这就是挑战。
在JS中，我使用了以下代码：
images.forEach((img, idx) => {
img.style.backgroundImage = `url(./images/${idx + 1}.jpg)`;
});
-遍历文件夹“图像”，并按顺序显示所有图像。这个想法是水平滚动图像(下面是完整的JS代码，在描述的末尾)。我也试过做同样的事情，但是我想不出一条出路。我曾在JSX上尝试过相同的代码，但没有起作用。我需要一行代码，就像js一样，可以迭代和显示所有的
浏览 11提问于2022-06-04得票数 1
1回答
我正在从API中获取图像，但是当获取它时，会更新react中的状态，但不会呈现在嵌套的Card中。但是当单击另一个列表时，它会更新卡片并渲染图像。以下是我的代码 componentDidMount() {
this.fetch()
} 这是在组件确实挂载时以及分页发生更改时调用的fetch方法 fetch = (params = {}) => {
let lang = localStorage.getItem("lang");
let accessToken = localStorage.getItem("
浏览 4提问于2019-03-12得票数 2
回答已采纳
在render中以声明的方式使用React内联创建多个空元素的最佳方式是什么？ 例如，假设我想要8个空的div，下面是我的第一次尝试，尽管它不起作用，有没有更好的方法？ render() {
return (
<section>
{
new Array(8).map(()=> <div />)
}
</section>
);
}
浏览 31提问于2019-04-25得票数 1
回答已采纳
学习会做出反应，但我试图在下拉框中映射一组对象。
我得到了一个"Uncaught : ids.map不是一个函数“。
当我将从get请求获得的loadedIds设置为useState的setIds时，为什么会出现这个错误呢？
谢谢你帮助初学者:')
function Dropdown ()
{
const [ids, setIds] = React.useState([]);
React.useEffect(() => {
request.get(endpointIds).then((response) => {
setIds(
浏览 4提问于2021-10-08得票数 1
回答已采纳
我使用API来获取引号，但我得到了一个未处理的拒绝错误"(TypeError)：this.props.message.map不是一个函数“，我使用调试器检查道具，看到我得到答案，那么可能是什么原因呢？我为什么要犯这个错误？这是我的密码
Message.jsx
import React from 'react';
export class Message extends React.Component {
render() {
const list = this.props.message.map((item, index) => {
浏览 4提问于2020-11-16得票数 0
回答已采纳
**当我试图把它分成更小的部件时，我对反应-酒杯有问题。下面是我想从其中分离出来的一个组件的完整代码：
import { Swiper } from 'swiper/react/swiper-react';
import { SwiperSlide } from 'swiper/react/swiper-react';
import { Pagination } from 'swiper';
import 'swiper/swiper.scss';
<div className={styles['categorie
浏览 5提问于2022-02-17得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频活动推荐
腾讯云开发者
