map函数中的条件渲染
基础概念
map 函数是 JavaScript 中的一个高阶函数，用于遍历数组并对每个元素执行指定的操作，返回一个新的数组。条件渲染则是指根据某些条件来决定是否渲染某个元素或组件。
相关优势
- 简洁性：使用
map函数可以简洁地遍历数组并生成新的数组，避免了显式的循环。 - 可读性：代码结构清晰，易于理解。
- 灵活性：可以根据条件动态生成元素，适应不同的渲染需求。
类型
在 React 中，map 函数常用于列表渲染。结合条件渲染，可以实现更复杂的 UI 逻辑。
应用场景
假设有一个用户列表，需要根据用户的角色来决定是否显示某些信息。
示例代码
import React from 'react';
const UserList = ({ users }) => {
return (
<ul>
{users.map((user) => (
<li key={user.id}>
{user.name} -
{user.role === 'admin' ? '管理员' : '普通用户'}
</li>
))}
</ul>
);
};
export default UserList;遇到的问题及解决方法
问题：为什么 map 函数中的条件渲染没有生效？
原因：
- 条件判断错误：可能是条件判断逻辑有误。
- 数据结构问题：可能是
users数组为空或格式不正确。 - 渲染逻辑问题：可能是其他渲染逻辑影响了条件渲染。
解决方法：
- 检查条件判断：确保条件判断逻辑正确。
- 检查数据结构：确保
users数组不为空且格式正确。 - 调试渲染逻辑：使用
console.log或调试工具检查渲染过程中的数据变化。
import React from 'react';
const UserList = ({ users }) => {
console.log(users); // 检查数据结构
return (
<ul>
{users.map((user) => {
console.log(user); // 检查每个用户的数据
return (
<li key={user.id}>
{user.name} -
{user.role === 'admin' ? '管理员' : '普通用户'}
</li>
);
})}
</ul>
);
};
export default UserList;参考链接
通过以上内容，你应该对 map 函数中的条件渲染有了更全面的了解，并且知道如何解决常见问题。
相关·内容
我想知道，如果我们只有几个条件渲染，是否应该采用第二种方法：
第一种方法：
const MyComponent = ({ isOpen }) => {
...
return (
{isOpen && <MyAnotherComponent />}
);
}
第二种方法：
const MyComponent = ({ isOpen }) => {
...
const renderComponent = () => {
if (isOpen) {
return <MyAnotherComponent
浏览 3提问于2022-07-04得票数 0
我使用Axios从数据库中检索了这个数据数组，我想根据一些条件返回一个字段的总和 我已经使用map()从我的后端获取数据： // getData.js return (
<ul>
{attendance.map(({ _id, name, male }) => {
return (
<div key={_id}>
<br />
<hr />
<li>{name}</li>
{/* the con
浏览 23提问于2019-09-06得票数 1
我根据对象的属性在React中渲染组件。问题是，最初渲染没有属性，这是它应该的方式，但.find()破坏了代码：
pallets.find((pallet) => pallet.selected).config.map(.......)
问题是最初没有选择托盘，所以没有配置。
有没有一种方法可以内联地解决这个问题，而不是将pallets.find()结果提取到一个变量中，然后执行if检查，然后才继续映射？如果我能保持内联，它会使React代码变得更容易。
浏览 13提问于2020-07-30得票数 1
回答已采纳
4回答
我有一个来自api的响应对象，我想循环它并渲染它，就像它是一个普通的数组一样，我如何渲染t恤、牛仔裤和家具？ 我不想渲染运动鞋的价值，有什么建议吗？ const items = {
tshirt: "Model TS",
jeans: "ModelXW",
sneakers: "indcdsc54",
furniture: "Table31S"
};
{Object.keys(items).map=>{i =>
{items[key]
浏览 64提问于2021-02-26得票数 0
回答已采纳
我有一个react页面，它提供了一个从GraphQL API返回的产品列表。一旦产品返回，我就将它们存储在一个状态中，然后呈现它们。如何只渲染符合特定条件的产品？
现在，我正在对产品进行映射并对每个产品进行渲染。工作正常。但是，如果我尝试使用条件语句，则IDE中会出现错误。这是我目前的代码。这项工作目前正在进行：
async function contactAPI() {
return await axios({
url: 'https://graphqlexample.com/api/products',
method: 'post',
浏览 9提问于2021-10-31得票数 1
回答已采纳
3回答
我在React js中遇到了一个问题，我想从rest API中渲染所有数据，并用数字索引显示。
Rest API：
[
{
"id": "1",
"start_date": "2020-05-08 09:45:00",
"end_date": "2020-05-08 10:00:00",
"full_name": "mirza",
"cust_full_name": "furqan",
},
{
"id": "2
浏览 1提问于2020-05-08得票数 0
使用dicussion应用程序时遇到问题。我只能在给定的time.Having中渲染标题或post，但在thread.jsx中如何渲染存在问题。此应用程序在react和firebase中。请建议我如何解决这个问题。我认为post中的map函数不是用map函数编写对象的right.how。我需要把object写成道具吗？
Thread.jsx
postEditor.jsx-----
import React, {Component} from 'react';
import './DpostEditor.css';
export default class Po
浏览 0提问于2018-08-01得票数 0
当一个搜索(带邮政编码)发生时，我的Google地图渲染遇到了问题。似乎地图正在渲染空地图中心，然后在componentDidMount()中的setState之后不重新渲染，因为地图被渲染为空白/灰色，但通过硬刷新，地图将加载邮政编码。我尝试过使用componentWillMount()，但没有成功，谁有什么建议？
这是我的搜索页面的代码：
class SearchContainer extends Component {
constructor(props) {
super(props);
this.state = {
map_centre: null
浏览 0提问于2018-07-31得票数 1
如何防止以下错误：
太多的重新渲染。React限制呈现的数量，以防止无限循环。
我的代码：
function App() {
const [items, setItems] = useState([]);
const [isLoading, setIsLoading] = useState(true);
if (items.length == 0) loadMore()
return <div>
{isLoading
? <div>Loading...</div>
浏览 3提问于2020-03-31得票数 1
回答已采纳
1回答
标签下的名称和产品被渲染，但是循环没有得到rendered..but我可以看到console.nad中的值没有抛出任何error...please hemp
<tr>
<th>name</th>
<th>productID</th>
{this.state.product[0].customCoulmns.forEach(function (columnhead) {
console.log("columnhead lolzz ",columnhead.columnName);
浏览 5提问于2016-09-13得票数 0
回答已采纳
我想要从我的api渲染图像，我首先使用lodash的大小来检查数组是否为空，如果它为空，则显示upload按钮，否则只渲染图像。
当我这样做的时候
{item.photos.toString()}我可以看到url，但是为什么下面的代码就是不能工作？在我的控制台中没有任何错误。
<div id="photo_upload">
{size(item.photos) > 1 ?
item.photos.forEach(photo =>{
<img src={photo} />
})
: <div
浏览 1提问于2017-03-06得票数 2
4回答
有没有任何方法可以重构下面的代码，使其更加清晰？特别是renderTodos方法中的多次返回。我也有一个困惑，我是否正确地创建了renderTodos方法？我应该把它放在渲染函数中吗？或者做this.renderTodos()是可以的？
export default class TodoList extends Component {
renderTodos = () => {
const { todos } = this.props
return todos.map(todo => {
return (
浏览 6提问于2017-07-16得票数 1
回答已采纳
4回答
数据： const zones = [
{
"ID":"4131",
"RID":"f1438b",
"Name":"Hero"
},
{
"ID":"6266",
"RID":"cd074d",
"Name":"Villan"
浏览 36提问于2021-09-06得票数 0
回答已采纳
4回答
反应条件渲染
、、
我想找出有条件的渲染在React中。如果用户的监视列表中没有电影，我只想输出一个标题。我想像这样的东西会起作用的：
render() {
return (
<Container>
{this.state.watchlist.map(item => {
if(this.state.watchlist.length > 0) {
return (
<WatchlistMovie
浏览 0提问于2019-03-20得票数 2
回答已采纳
3回答
我在渲染中添加了一个条件，它突然停止显示。这是正在使用的代码。
{this.state.sdata.map((sdata, i) =>
{i < 5 &&
<ServiceNavItem key={i} onClick={()=>this.handleSelect(i)}{...sdata} />
}
)
}
我只想显示来自sdata的4个项目。请大家帮帮忙。
浏览 4提问于2017-06-20得票数 1
回答已采纳
1回答
我有一个redux状态，它工作得很好，因为我的数据在redux存储中。我可以用console.log(this.props)把它渲染出来，但是我似乎不能把它渲染出来。它返回以下错误：
TypeError: Cannot read property 'somevalue' of undefined
通常，我会使用html/jsx的静态块在props上进行映射，但我需要在每个循环中使用不同的html，所以我尝试将值直接插入到标记中。有谁能告诉我怎么走吗？
import React, {Component} from 'react';
import { connect
浏览 0提问于2019-10-23得票数 0
<Body>
<HeaderDiv>Your Orders</HeaderDiv>
{
data && data.map ((item)=>{
return(
<CardMainDiv color>
</CardMainDiv>
)
浏览 0提问于2020-05-22得票数 0
2回答
我是新来的React JS。我有两个对象taskData和taskDatafilter。我想根据条件渲染其中的两个。切换开关如果开关处于启用状态，则仅渲染taskDatafilter，但如果处于禁用状态，则渲染taskData。到目前为止我的代码是 import React, { Component } from "react";
import Button from "reactstrap/lib/Button";
import TodoItem from "../TodoItem/TodoItem";
import Switch f
浏览 20提问于2021-07-30得票数 0
回答已采纳
1回答
我知道这样做并不是最好的方法，但就目前而言，我仍须解决以下问题：
编译失败，如果出现意外令牌
<Col>
{
if (language === 'en')
{
Api.getFaqText().map(b => {
if (b.id === 1)
return <BHead textClass={b.classname} key={b.id} title={(<div dangerouslySetInnerHTML={{__html: b.title}} />)} />
})
浏览 0提问于2018-05-08得票数 0
正如标题所说，我需要访问所有子对象React.Children.map(this.props.children, (child)...的映射函数的每个child元素
我需要这个，因为我想要有条件地渲染某些道具，并根据当前正在渲染的子对象来阻止基于某些条件的渲染。
我已经在构造函数中绑定了这个函数
this.renderChildren = this.renderChildren.bind(this);
但它仍然不起作用。让这个映射函数工作的唯一方法就是把它包装在一个return()函数中。有什么想法吗？
renderChildren(funcs) {
// debugger
r
浏览 1提问于2018-03-20得票数 0
我不能在渲染中渲染从函数返回的任何元素
this.state.globalConfirmedCases.isLoading
?
<Loading/>
:
this.generateCount(this.state.globalConfirmedCases)
generateCount = ()=> {
this.state.globalConfirmedCases.data.ma
浏览 15提问于2020-05-06得票数 0
回答已采纳
我正在渲染一个元素列表并进行分页，我的列表的每个页面包含3个元素。 分页工作正常。但我不知道如何更改活动分页项目的颜色，以便用户知道它在哪个页面上。 你能告诉我如何做到这一点吗？ 下面是我放入codesandbox中的代码 ? 例如，在上面的照片中，活动页面是2。但没有迹象表明这一点。 提前谢谢你。
浏览 10提问于2020-10-10得票数 2
回答已采纳
1回答
我正在尝试使第二个(以及所有后续的)下拉列表的内容基于“类别”旁边的第一个下拉列表中所做的选择来呈现。 所有其他下拉列表都应该动态呈现，并允许用户选择多个条目。 目前，第一个下拉列表中的选项渲染得很好，第二个下拉列表中的选项渲染得很好，但createInputs()中.map()函数中的所有选项都不会渲染。 https://codesandbox.io/s/cranky-galois-cwlvw?fontsize=14
浏览 26提问于2019-10-03得票数 1
回答已采纳
我今天开始使用一个新的linter (tslint-react)，它给了我以下警告：
“JSX属性中禁止使用Lambdas，因为它们会影响呈现性能”
我知道这会导致每次渲染时都会创建一个新函数。这可能会触发不必要的重新渲染，因为子组件会认为它的道具已经改变。
但我的问题是，否则如何在循环内将参数传递给事件处理程序：
customers.map( c => <Btn onClick={ () => this.deleteCust(c.id) } /> );
浏览 1提问于2017-05-15得票数 37
回答已采纳
3回答
我有一些卡片，我想让它看起来像这样 [] [] []
[] [] []
[] [] []
...
... 我有一个问题，渲染地图功能的项目。我已经试过了，但是不起作用。对于每个索引，如果索引可以被3整除，我想创建新的行。我怎么能做到这一点？ {products.map((val, index) => (
{ index%3 == 0 ? <div className="row mx-auto"> : null}
<Card>
浏览 7提问于2021-05-05得票数 0
我正在ReactNative中编码二维数组.
在JSX中，单数组是成功的。
但我不知道如何在JSX中使用二维数组。
我们能在JSX中使用二维数组吗？
渲染是成功的
<View>
{myDoubleArray.map(loop => {
return <Text>{loop}</Text>;
})}
</View>
渲染是nothing (我的问题)
<View>
{myDoubleArray.map(loop => {
loop.map(elm => {
return <
浏览 6提问于2022-06-29得票数 0
回答已采纳
在我的render函数中，我做了console.log(items)，我得到了这个
但是为什么我的渲染什么都没有输出呢？
{items.map(item => {
<li key={item.id}>item.name</li>
})}
浏览 3提问于2017-02-23得票数 1
回答已采纳
我正在使用一些小技巧将坐标系统更改为我所习惯的坐标系(左、上是负的，而右和下是正的)，但是这会导致平铺的地图渲染器呈现地图不正确，如下所示
📷
而在平铺地图编辑器中它看起来是这样的
📷
这是我用来改变坐标系的“黑客”：
float w = Gdx.graphics.getWidth();
float h = Gdx.graphics.getHeight();
Camera = new OrthographicCamera(w, h);
Camera.setToOrtho(true, w, h);
我的渲染代码
renderer.setView(Camera);
renderer.render
浏览 0提问于2013-10-13得票数 4
回答已采纳
我想从道具中呈现项目，我可以在初始状态下进行，但不能通过服务器的响应来实现。我的渲染功能：
const { data } = this.props;
return (
<div >
{data.map((item, index) =>
<div key={index} className="row">
<span data = { data } className="number col-4 col-md-8">{i
浏览 6提问于2017-08-20得票数 2
从主控制器视图中加载部分视图，如下所示：@Html.Partial("MapPartial"，Model)
在局部视图中，我想渲染一个贴图。目前，我有一个Ajax beginform with submit按钮，它调用控制器操作，onSuccess加载JavaScript函数中的数据，该函数呈现地图，如下所示。这可以很好地工作。
<div id="map"></div>
@using (Ajax.BeginForm("GetData", "Directory", new AjaxOptions { OnS
浏览 1提问于2014-01-07得票数 2
我只是在学习react。我所要做的就是渲染输出。为什么我的页面不能渲染？作为参考，https://jsfiddle.net/salvatoreasantamaria/r35ckyat/ class Hello extends React.Component {
constructor() {
super();
this.state = {
test: 'Hi!',
todos: [
{
id: 10,
name: 'ten'
},
浏览 39提问于2019-06-19得票数 0
回答已采纳
3回答
目前在react中，我必须在componentDidMount生命周期方法中执行函数，在该方法中调用获取数据的操作创建器。但是，组件使用数据，这取决于响应的速度确定数据是否存在。我怎样才能让组件在数据出现之前不会被渲染？
componentDidMount() {
this.props.getTotalHours()
this.props.getTrained()
}
渲染函数：
render() {
let hours = parseInt(_.map(this.props.hours, 'hours'));
let trained = _
浏览 2提问于2017-10-19得票数 7
回答已采纳
我有许多标记和markerclusterer，我需要在谷歌地图上渲染。我目前使用的是应用程序接口(v3)，在速度较慢的机器上存在性能问题。我该怎么做？？我使用ajax和XML
浏览 4提问于2014-02-05得票数 8
我有一个Observable，它只在用户将光标拖到我的模板中的DOM元素上时发出，内部的observable将在每次外部observable发出时重新订阅。
...
this.mousedown$ = fromEvent(this.elementRef.nativeElement, 'mousedown');
this.mouseup$ = fromEvent(this.elementRef.nativeElement, 'mouseup');
this.mousemove$ = fromEvent(this.elementRef.nativeElement,
浏览 0提问于2020-09-16得票数 0
3回答
我试图在渲染函数中调用内部条件函数，只有在条件为真的情况下才会调用函数。
在以下代码的第3行。
{this.props.xarray.map((heading, index) =>
{return heading.headingis.toLowerCase().indexOf('mobile') != -1 ?
{this.setcheckstate()} //THIS IS FUNCTION
<option value="{heading.headingis}" key={index
浏览 7提问于2017-09-21得票数 0
回答已采纳
我有一个基于lit-element的组件，它渲染一个包含大约200个条目的组合框。模板的渲染大约需要0.20s。 html`
<select>
${this.list.map((o) => html`
<option id="${index}"
@click="${this.handleClick}">${o}</option>`
)}
</select>` 我多次呈现相同的组件，属性列表使用相同
浏览 8提问于2021-01-26得票数 0
使用AngularJS构建的谷歌地图应用程序。
当前部署的沙箱：
单击Map链接，您将注意到只渲染了一个瓦片。
如果您随后调整浏览器窗口的大小，则其余的地图平铺将完全渲染。
下面是git项目：
为什么不是所有的Google地图图块都被渲染？
有没有一种方法可以测试瓷砖的完整渲染？
有没有办法强制重新渲染所有的地图图块？
浏览 0提问于2013-05-03得票数 8
回答已采纳
1回答
当条件第二次渲染时，我尝试显示水平线<hr>标记。例如，当数据第一次渲染时，我不想要<hr>标签，但当它第二次渲染时，我希望hr标签出现在两个数据之间，我试过了，但什么也找不到。有人能帮我做这个吗？
{
this.props.details && this.props.details.length > 0
? this.props.details.map((data) => (
<>
<div>{data} </div>
</>
浏览 0提问于2020-07-22得票数 0
我正在对TypeScript使用react。我在react中映射了一个JSON文件。在浏览器中渲染所有数据只需要一秒钟。我使用的是函数组件。下面是代码。请帮我在浏览器中优化渲染时间。
import users from "../data/users.json";
const Users:React.FC=() => {
const displayUsers=users.map((item){
return(
<p> {item.username} </p>
<p> {item.location} </
浏览 0提问于2021-03-14得票数 0
我正在尝试使用Mapbox/Turfjs来了解多边形中有多少个点。我已经渲染了我的多边形和map.onload中的点，那么在多边形和点渲染到地图之后，是否可以从另一个函数调用Turf.js？
像这样的东西...？
$(document).ready(function(){
mapboxgl.accessToken = 'eeeeeeeeee';
map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/street
浏览 4提问于2017-06-20得票数 0
我对此有点纠结。我需要使用.map从特定的数组( dataSource )创建一个下拉列表，但是如果三元条件为真，则需要dataSource中的选项+另一个选项。
我试过了，但不能渲染
<Dropdown
key={dataSource}
type="form"
label=""
primary="Select..."
valid={validation.dataSource.isValid}
messa
浏览 26提问于2021-03-12得票数 0
为了快速解释我的问题，在我的渲染中，我调用了一个函数，该函数通过map函数显示数组的每个元素。当我点击按钮时，我想要将元素发送到另一个函数。但是当我点击按钮时，我看到了以下错误："TypeError：_this2 is undefined"，下面是我代码的一些截图：
提前谢谢你！
浏览 43提问于2019-11-27得票数 0
回答已采纳
1回答
我有一个问题，就是如何处理发亮+单张的渲染单张。由于管道处理(%>%)变得很长，我们希望通过函数使代码变得紧凑。
一种是带有重发传单的文件。另一种是在渲染传单中使用的addAwesomeMarkers。
文件name:ms_method.R
library(shiny)
library(leaflet)
basepath <- "C:/Users/XXXXX/"
source(paste0(basepath,"ms_method_ex.R"),encoding="utf-8")
ui <- fluidPage(
l
浏览 3提问于2020-12-25得票数 0
回答已采纳
我想在javascript数组上使用map()函数，但我希望它以相反的顺序操作。
原因是，我在Meteor项目中渲染堆叠的React组件，并希望首先渲染顶级元素，而其他元素则加载下面的图像。
var myArray = ['a', 'b', 'c', 'd', 'e'];
myArray.map(function (el, index, coll) {
console.log(el + " ")
});
打印a b c d e，但我希望有一个打印e d c b a的mapReverse()
浏览 98提问于2016-04-05得票数 140
回答已采纳
3回答
如果元素存在，则条件呈现
、、、、
我有React组件，它使用axios从MySQL调用数据并呈现它。问题是，如果我想显示消息，如果我没有任何数据。我的代码如下所示。 render() {
return (
<div>
{this.state.elements.length < 1 ? (
<p>Elements doesn't exist</p>
) : (
<ul>
{ this
浏览 29提问于2019-12-17得票数 0
我在我的react-leaflet地图上有一个1000分钟到5000个最大点的数组。因此，我在map组件中的渲染函数看起来类似于：
renderMarkers = () => {
return markers.map(
(marker) => {
return <Marker key={`${marker.id}`} position={[marker.lt, marker.lg]} ></Marker>
}
)
}
render() {
<Map>
浏览 0提问于2018-05-23得票数 3
1回答
旋转时网格的裁剪
、、
我用three.js中的一些网格制作了一个模型，但是当我用OrbitControls移动我的相机时，似乎我的一些网格剪辑。这是我的渲染：
通过在互联网上的搜索，我找到了一些解决方案，提到要设置为false的材料的false。在这种情况下，我的所有元素都会显示出来，但3D却被打破了(正常情况下，这个特性似乎主要是为了在2D渲染中叠加元素而设计的)。禁用depthWrite的呈现：
下面是我遇到的问题的一个最小的例子：
谢谢你的帮助！
浏览 6提问于2022-01-09得票数 1
回答已采纳
我正在映射一个数组在中。有多个王国被渲染。
每个DOM都绑定了一个click事件处理程序。其中显示了一些细节点击。
我希望触发对该数组的最后一个元素的自动单击，并将该事件传递给clickHandler。
{
historyData.map((heading, index) => {
return(
<div className="history-node-container" key={index}>
//This is where click handler is being cal
浏览 5提问于2017-10-24得票数 0
我想在<a>上添加一个map处理程序
我的简单功能：
getFacilities = (e) => {
console.log(e)
}
在渲染中：
const items = this.state.data;
let result = items.map(function(value, i){
return (
<List.Item key={i}>
<a onClick={this.getFacilities}>{value.user.name}</
浏览 1提问于2019-12-03得票数 0
回答已采纳
我使用“本地基础”组件作为我们的产品，并对此做得很好，但我只停留在一个点上，那就是在Nativebase中放置项目。我的代码是这样的
渲染方法代码-
render(){
return (
<View style={{marginTop: 20, flexDirection:'row', flexWrap:'wrap', justifyContent:'space-around', alignItems:'center'}}>
<View style={{flex:1, ju
浏览 3提问于2017-05-22得票数 4
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
云直播活动推荐
腾讯云开发者
