我使用React中对象数组中的数据进行的三元运算不起作用
在React中，使用对象数组进行三元运算时，可能会遇到一些问题。以下是一些可能导致三元运算不起作用的常见原因和解决方法：
- 对象数组的数据结构不正确：首先，确保你的对象数组的数据结构是正确的。每个对象应该具有相同的属性，并且属性的值应该是可比较的。如果对象数组中的对象具有不同的属性或属性值类型不同，三元运算可能会出错。可以使用
console.log来检查对象数组的结构和属性值。 - 三元运算符的语法错误：确保你在使用三元运算符时没有语法错误。三元运算符的语法是
condition ? expression1 : expression2。确保条件表达式返回一个布尔值，并且表达式1和表达式2的结果类型相同。 - 对象数组的数据可能是异步获取的：如果对象数组的数据是通过异步请求获取的，那么在数据还没有返回时，三元运算可能会出错。在这种情况下，可以使用条件渲染的方式来处理。例如，可以在数据返回之前显示一个加载中的状态，或者使用
useEffect钩子来监听数据的变化。 - 对象数组的数据可能需要进行深层比较：如果对象数组中的对象是通过引用传递的，而不是通过值传递的，那么在进行比较时可能会出现问题。在这种情况下，可以使用深层比较的方法来确保比较的准确性。可以使用
lodash库中的isEqual函数来进行深层比较。
总结起来，当在React中使用对象数组进行三元运算时，需要确保对象数组的数据结构正确，三元运算符的语法正确，处理异步获取数据的情况，以及需要进行深层比较时使用适当的方法。
相关·内容
我有页面(MyNotes.js)，它显示了所有针对该用户的注释。因此，当按下按钮查看详细信息时，用户将被重定向到另一个页面(NoteDetail.js)，在该页面中，我将传递特定于该特定注释的id。在重定向页面中，在id的帮助下，我调用一个api并填充数据。但是现在，如果用户将后退按钮按到上一页(MyNotes.js)，我将得到以下错误
MyNotes.js:30 Uncaught TypeError: notes.map is not a function
at MyNotes (MyNotes.js:30:1)
at renderWithHooks (react-dom.d
浏览 7提问于2022-03-07得票数 0
回答已采纳
1回答
我试图将mealContainer重定向到Meals，以显示该数据的详细信息。顺便说一句，我正在使用mealDB作为API。但问题是，当我单击div来显示细节时，它有时会变成空，有时会显示数据。我不知道为什么会发生这种事。因此，我试图通过使用三元操作符来显示当它是空时的警告。我怎么能这么做？
import React, { useState } from "react";
import Meals from "../Meals/Meals";
import "./MealCategory.css";
const MealCategory = (
浏览 4提问于2022-01-09得票数 -1
回答已采纳
1回答
带有React的购物车
、、、
我刚刚在React中创建了我的第一组相关类，并希望从更有经验的React开发人员那里获得反馈。
我用了ES和完全香草的反应。应用程序是购物车，购物车项目数量更新总数。
一个文件的情况是，因为它似乎不喜欢多个文件，构建将修复这个问题，这不是这个问题的范围。
边界元在反应上下文中的应用是如何发生的？有什么方法可以改善这一点，特别是反应组件、状态和道具的应用？
我并不是专门研究任何JavaScript，只考虑重构(比如在总计算函数中的重构)，也没有研究任何HTML问题。
拉和运行从这里 - CSS也在这里。
var CartItem = React.createClass({
calculat
浏览 0提问于2015-10-07得票数 6
我听不懂。简而言之，我有这两个在状态中使用的变量 questionLoaded
gameOver 此组件需要等待，直到它使用函数selectRandomQuestion完成数据获取。 因此，如果我删除了questionLoaded，当它在映射中循环时，它会给我异常。 现在，我必须创建另一个变量来检查游戏何时结束以取消呈现这个组件，因此出现了questionLoaded || gameOver ? 我尝试检查变量currentQuestion以有条件地呈现，但由于某种原因，在循环此属性的options数组中的映射时会出现异常。这意味着当命中条件检查时，currentQuestion在它自己的子
浏览 20提问于2020-09-25得票数 1
我正在读取一个JSON文件。在某些记录中，属性Attachments基本上是一个数组，而在某些记录中，它不存在。我试图应用一个条件呈现，它将检查该属性是否存在于记录中，然后它将呈现它的元素，否则它将跳过记录。它给我的错误是“无法读取未定义的属性(读取'map')”。我的代码如下：
{data.map((record) => (
<tr>
<td>{record.UniqueName}</td>
浏览 3提问于2022-06-29得票数 0
回答已采纳
2回答
当checkedIds的状态为空时，我希望禁用react组件中的按钮，禁用按钮的代码如下所示：
<Button disabled> disabled </Button>
但是当我尝试这个时，它不起作用
<Button {if(this.state.checkedIds.length===0) {
return disabled;
}}>
Delete Selected
</Button>
帮助?
浏览 4提问于2017-06-07得票数 1
回答已采纳
我试图在一个基于类的组件中的if..else方法中编写一个javascript render语句，但出现了一个我无法诊断的错误。
import React, { Component } from 'react';
import Slider from 'react-input-slider';
class RangSlider extends Component {
state = {
x: 0.3,
};
render() {
return (
<React.Fragmen
浏览 0提问于2020-07-30得票数 0
我正在研究一些编码示例，并在React中看到了一个组件声明的示例：
export const TodoList = ({ todos }) => (
<ul>
{
todos && todos.length
? todos.map((todo, index) => {
return <Todo key={`todo-${todo.id}`} todo={todo} />
})
: "N
浏览 2提问于2019-06-15得票数 1
回答已采纳
在我的react代码中，我有一个默认数据，只要没有选中复选框，就会显示出来，但当有选中的值时，数据应该会更新，并根据选中的值返回另一个数据。但我目前所拥有的并没有给我所期望的东西。请帮我检查一下我做错了什么。 我期望的是该表返回另一个表，其中包含选中的value...anywhere。否则，如果未找到，则返回默认数据 我的沙盒sandbox link App.js import React from "react";
import "./styles.css";
import { useState, useEffect } from "react
浏览 11提问于2021-11-03得票数 0
回答已采纳
1回答
我刚刚开始使用ReactJS，目前正在将ReactJS实现到我当前的项目中。我现在正在尝试做的事情如下：
我有一个包含多个文件名的XML-file (它们是在另一个点上动态添加的，这与这个问题无关。无论如何，我的观点是，您无法预测该文件中将包含什么/有多少元素)。我使用XMLHttpRequest和JavaScript，以便将数据保存到列表中。按钮上的OnClick，我想要显示/隐藏所述列表。我正在使用ReactJS创建按钮。
创建按钮：
const styles = theme => ({
button: {
margin: theme.spacing.unit,
},
浏览 0提问于2017-12-13得票数 1
1回答
我使用阿波罗从GraphQL获取数据。当我尝试从useQuery记录数据时，我得到了两个日志，第一个是undefined，第二个是包含gql数据的日志。 例如，当我试图从data.flats.title react获取数据时，我有未定义的信息，因此它是来自first console.log()的信息。如何获取数据并进行显示？ 控制台屏幕： 📷 import React from "react";
import { gql, useQuery } from "@apollo/client";
const myQuery = gql`
query {
浏览 9提问于2020-10-23得票数 0
回答已采纳
2回答
在收到新数据后，我想刷新我的react表。我原以为当我改变状态时，我会触发它，但是它不起作用。
下面是state和update函数：
this.state = {
switchListSelected: [],
switchListData: [],
interfaceStatusData: [],
interfaceErrorsData: []
}
updateParentState(data, element){
this.setState(prevState => {
return prevState[elem
浏览 0提问于2019-09-11得票数 0
回答已采纳
我试图将类名添加到react元素中，使用以下方法：
className: "btn btn-primary #{!@valid() ? 'disabled' : ''}"
然而，这将导致class="btn btn-primary true"
此咖啡代码编译为不正确的JS，如下所示：
className: "btn btn-primary " + ((ref = !this.valid()) != null ? ref : {
'disabled': ''
浏览 1提问于2016-03-18得票数 0
回答已采纳
1回答
给定：
const Item = styled.div`
color: ${p => p.blue ? 'blue' : 'black'};
`;
我需要在带有样式组件的div标签(Item)下动态添加dom元素。如果这是JQuery或JavaScript，则需要获取div的类或id，
你如何在react中做到这一点呢？
浏览 0提问于2018-05-21得票数 0
我使用React来显示一个材料设计网格新闻文章列表。我将接收到的JSON传递给这个GridList组件(this.props.newsArticles)，并通过每个返回的结果进行映射，这样我就可以根据它是否有一个hi-def映像来过滤数据，然后将数据发送到MediaTile以得到呈现。在GridList模块的hasHiDefPictures函数中，我的三元函数出现了问题。我收到一个语法错误。
const Components = {
MediaTile: React.createClass({
render: function() {
return (
<Gr
浏览 6提问于2016-07-02得票数 2
回答已采纳
2回答
我使用Material UI的switch。当开关打开时，我希望标签上写着“开关打开”，当开关关闭时，我希望标签上写着“开关关闭”。我是新来的州，所以希望能得到一些帮助来实现这一点！ 下面是我的代码： import React from 'react';
import Switch from '@material-ui/core/Switch';
import FormGroup from '@material-ui/core/FormGroup';
import FormControlLabel from '@material-ui/
浏览 11提问于2021-01-05得票数 0
回答已采纳
当我将获取的数据传递给支持时，它会在组件中返回一个额外的proto对象。在将数据传递给支持之前，当我用componentDidMount()记录数据时，它会返回我希望使用的正确的单一对象格式。但是，当我把它作为道具传递下来时，它会返回两个对象。一个带有proto，另一个是正确格式化的对象。
如何将单个对象格式传递给道具？
Api端点
export const fetchWorldData = async () => {
try {
const response = await axios.get(worldData);
return response;
} cat
浏览 1提问于2020-07-14得票数 0
回答已采纳
import { Route, Redirect } from 'react-router-dom';
import React, { useContext } from 'react';
import AuthContext from '../contexts/AuthContext';
function PrivateRoute({ children, ...rest }) {
const auth = useContext(AuthContext);
return(
<Route
浏览 31提问于2021-09-24得票数 0
我正在尝试使用Axios获取API，请帮助我解决以下问题。我是react JS的初学者，没有捕获TypeError: transactions.map不是react js中的函数。
import React, { useState, useEffect } from 'react';
import axios from './axios';
import './App.css';
function App() {
const [transactions, setTransactions] = useState({transactions:[
浏览 0提问于2021-03-16得票数 1
我一直在尝试编写一些简单的React代码来从模拟API中获取数据并将其显示在页面上。但是，当尝试映射从异步函数返回的由axios返回的post数组时，它给了我一个错误。 我尝试将props.posts设置为变量，但仍然不起作用。 下面是我的应用程序结构和我用来以JSON形式从API获取用户的函数： function App() {
// Hook that declares a posts state
const [posts, setPosts] = useState([])
useEffect(() => {
getPosts().then
浏览 11提问于2019-06-12得票数 1
回答已采纳
2回答
我有个复选框。如果选中了复选框，则应选中表单检查。但对我不起作用。我有以下代码：
import React, { useState } from 'react'
import { Row, Form, Container } from 'react-bootstrap'
import subMenu from '../subMenu.js'
function TestScreen() {
const [test1, setTest1] = useState(subMenu)
const subMenuHandler = (e) => {
浏览 0提问于2021-02-13得票数 2
回答已采纳
我正在尝试制作一个个人应用程序，我遇到了一些与请求有关的问题，与API无关。 请求的结果返回JSON：https://pastebin.com/raw/vpdq2k6S 我的代码： class Home extends Component {
componentDidMount() {
this.props.getTrending();
}
render() {
const { trending } = this.props.trending;
console.log(trending);
const Card = (props) => (
浏览 24提问于2020-10-30得票数 0
回答已采纳
在我的应用程序中，在添加某些文本元素之前，我需要检查div container是否为empty (在我的应用程序中，innerHTML被多次创建和删除，因此需要检查是否为空)。div的创建非常简单，如下所示。为什么如下所示的检查空字符串不起作用？我期望警报显示文本Nothing，但它没有。 let targetContainer = document.getElementById("container")
let containerText = targetContainer.innerHTML
alert("Text: " + containerText
浏览 13提问于2021-01-16得票数 1
回答已采纳
1回答
因此，我有一个名为Columns.js的文件，其中包含以下代码： const cols = {
key1:val1,
key2:val2,
...
...
}
export default cols; 现在，我有另一个名为Widget.js的文件，它包含以下代码： //other imports
import cols from './Columns';
//import Table and TableLoader
export default function Widget(){
const data,error,loading... = useQuery(//some
浏览 18提问于2021-07-20得票数 1
回答已采纳
在这里，我使用自定义钩子实现了redux like store。一切都很顺利，代码执行正确，但问题是在reducer中，在switch语句"TOGGLE“下，我返回了一个更新的状态，该状态最终存储在全局状态中，但是如果我返回了空对象{}而不是{products: updated}，仍然正确地更新了全局状态，并且已经在reducer...since中完成了更改。我没有传递全局状态引用，那么它是如何正确更新的呢 以及侦听器在代码中的调度方法中到底做了什么 import MarkFavMulti from "./MarkFavMulti";
import classes f
浏览 15提问于2021-01-20得票数 0
const listItems = items.map((item) =>
item.id === id ? { ...item, checked: !item.checked } : item
)
特别是item.id和id有什么区别？最后为什么要使用: item呢？
下面是完整的代码，注意代码不是我正在处理的东西，它是一个教程，还有更多的代码需要编写
import React from "react";
import { useState } from "react";
import { FaTrashAlt } from "
浏览 9提问于2022-06-12得票数 0
回答已采纳
我在react中有一个布尔属性，我正在尝试使用它，如下所示：
const MyComponent = ({ prop1, prop2, isBoolean }) => {
...do something..
return (
if (isBoolean) ? (do this) : (do that)
}
所以我的意思是，如果isBoolean是真的，那么做这个，否则做那个。这是正确的语法吗？
浏览 2提问于2017-07-25得票数 0
我在跟踪ReactJS 。我用Spring语言编写了一个简单的应用程序接口，然后在http://localhost:8080上编写了一个React组件来使用该应用程序接口。接口当前返回两项列表，如下所示：
[
{brand:"Asus", make:"AAA"},
{brand:"Acer", make:"BBB"}
]
下面是我的组件的样子：
import React from 'react';
import ReactDOM from 'react-dom';
import {
浏览 0提问于2018-09-27得票数 4
回答已采纳
对不起，我有点新的反应，为什么我不能通过数据映射。我尝试了几种不同的方法，但都没有用。也许原因是它是一个物体。有人能帮上忙吗？
import React, { Component } from "react";
import axios from "axios";
import "./Profile.css";
import ProfileCard from "../ProfileCard/ProfileCard";
class Profile extends Component {
state = {
userI
浏览 0提问于2018-08-13得票数 0
回答已采纳
我有一个代码，在按钮点击时在深色主题和浅色主题之间切换，如下所示： App.js： import React, { useState } from "react";
import Card from "./Card";
import { ChangeTheme } from "./functions/ChangeTheme";
export default function App() {
const [theme, setTheme] = useState("dark-theme");
const changeTh
浏览 36提问于2021-01-19得票数 0
回答已采纳
无意中发现了这段代码：var text = 'text' in this.props ? this.props.text : '';，但是即使我理解上下文，我也很难理解这一行代码。它被描述为防御性代码，因为在React中可以用getDefaultProps()方法替换它。
浏览 0提问于2018-04-13得票数 0
回答已采纳
我从MySQL获得一些数据，并将数据打印为echo $row['ref'];。
有时echo $row['ref'];会返回空结果。我想编写一个像echo isset($row['ref']) ? $row['ref']:'Unknown';这样的条件，如果echo $row['ref'];返回空结果，它将显示Unknown word。
提前谢谢。
浏览 0提问于2016-12-18得票数 1
1回答
我在SSR React应用程序的箭头函数中遇到了一个非常奇怪的问题。我想做的基本上是有条件地将组件加载到变量中，但我得到的是非常奇怪的变量/条件行为。 在情况1中:我得到了正确的行为，而strangeComponent得到了空值 const isClient = false;
const strangeComponent = false ? (<Field
name={name}
isMulti
component={({ input, ...rest }) => (
<Select {...input} {...rest} searchable
浏览 28提问于2020-09-29得票数 0
1回答
我希望在表单组件中的数据显示时，拾取按钮被单击。单击yes或no按钮时，要在拾取组件中输入的来自myvehicles的数据。我试过这样做，但不起作用。
import React,{ useState } from 'react'
import './Pickup.css'
import logo from './images/logo.png'
import { Link, useHistory } from "react-router-dom";
import InfoYes from './InfoYes'
i
浏览 0提问于2020-12-24得票数 0
我正在尝试在React中创建一个待办事项应用程序。到目前为止，我编写的代码将待办事项添加到待办事项列表中。当我点击编辑图标时，我已经为完成图标设置了turnery条件，但它不工作。有人能解释一下我的代码出了什么问题吗？ App.js import './App.css';
import React, { useState } from 'react';
import TodoList from './TodoList';
import { v4 as uuidv4 } from 'uuid';
function App() {
浏览 28提问于2021-02-04得票数 0
回答已采纳
2回答
HTML标记中的条件呈现
、、、
我必须检查用户是否有空，如果是的话，背景样式是设置的。我可以简单地通过PHP使用if语句完成此操作，但如何使用react完成此操作？
到目前为止，我所拥有的：
<a className={classes} onClick={this.toggleDialog} { theUser.get('isAvailable') == 1 && style={{backgroundColor: "rgba(39, 174, 96, .15)"}} } >
{theUser.get('first_name')}
</a
浏览 1提问于2018-06-06得票数 0
我有一个简单的asp.netcore后端的react-redux应用程序。我想使用加载指示器，如微调器等或图标，以显示之前的数据被加载。我的组件是Courses.jsx import React, { useState, useEffect } from "react";
import {useDispatch,useSelector} from 'react-redux';
import CourseList from "./CourseList" ;
import * as actions from "../_actions/cou
浏览 10提问于2020-07-16得票数 0
1回答
如何显示值为0/1的列transfer的一些文本，例如，如果值为0，则工具提示上的文本应被“激活”，如果值为1，则文本应为“未激活”
下面是我写的逻辑，但它不起作用，请给我建议正确的更改。
<span *ngIf = "headerDef['property'][i] === 'transfer' "
title="{{headerDef['transfer'][i] == '0' ? headerDef['transfer'][i]: 'Activated' }}
{
浏览 4提问于2021-07-12得票数 0
我希望从/list端点加载图书列表(图书文件)，并在<ul>中列出它们。我创建了一个列表组件，然后在index.jsx上导入它。但不起作用。如何使用从body中的服务器获取的json数据来呈现组件？
list.component.jsx
import React from 'react'
class List extends React.Component {
constructor() {
super()
this.state = { files: [] }
}
componentDidMount() {
let files
浏览 0提问于2019-04-10得票数 0
回答已采纳
2回答
一旦我的应用程序加载，'FETCH_PRODUCTS‘操作有效负载就会被分派，导致源自data.json文件的项被添加到我的产品缩减程序中的状态。我可以在我的actions和reducers文件中通过console.log(action.payload)访问这种状态。我需要能够遍历state对象，这样才能从products组件中的state呈现产品。但是，我无法遍历该对象。我尝试过用Object.keys()、.values()和.entries()把它转换成一个可迭代的数组，但没有成功。
这是我在Products.js中使用console.log() action.payload或p
浏览 0提问于2020-08-31得票数 1
3回答
基本上，我有一段相对复杂的代码，其中有几个数组相互嵌套。我认为我想要做的事情严格来说是不可能的：
$selector = true,
$main_array = array(
'general' = array(
'another_array' = array(
'option1' = array(
'title' = 'Some Title',
'type' = 'select',
if ($selector == true)
浏览 0提问于2012-11-22得票数 1
回答已采纳
为了模仿Javascript，我在PHP中尝试了一下：
$what == '3' ? ( $tot1 += $sum ; $nLinesProd++ ; )
: ( $tot2 += $sum ; $nLinesExp++; ) ;
我也尝试了{}而不是()。这两种方法都不起作用。
有没有一种方法可以像在Javascript中一样使用三元运算符？
浏览 2提问于2017-02-16得票数 0
3回答
React模块内部的条件
、、、
我有两个相邻的React模块，可以在另一个模块中添加/删除用户。如果所有用户都已从“删除用户”模块中删除，那么返回通知的最佳方法是什么？例如，下面是我删除用户的模块：
var React = require('react');
module.exports = React.createClass({
handleRemove: function () {
this.props.onRemove(this.props.user.id);
},
render: function () {
return (
<div className=&
浏览 0提问于2016-02-20得票数 0
我已经看到这个问题张贴在这里，但没有一个答案似乎是一个实际的组成部分或没有发挥作用，所以我将张贴我的问题，看看我是否遗漏了什么。
我正在制作一个有身体部分的博客，用来添加一个故事。我希望在正文中有一组特殊的字符“{{ 21 }”，以指示应该用PhotoDeck组件替换它，并传递列表21中的照片。在我的API中，我能够解析文本，查找标记，获取id，并将其作为对象数组添加到api返回：
inline_photos": [
{
"list_id": "21",
"photos": [
"/img/ODdiNzUwODMtZT
浏览 1提问于2021-02-22得票数 0
回答已采纳
我不确定如何修改useEffect函数(或使用React的新Suspense组件)，以便在呈现组件之前等待加载所有数据。 下面是从Flask后端获取数据的代码： import socketIOClient from "socket.io-client";
const ENDPOINT = "http://127.0.0.1:5000";
const [response, setResponse] = useState("");
useEffect(() => {
const socket = socketIOClient(
浏览 35提问于2020-10-27得票数 0
我可以使用多个这样的条件：
<div [ngClass]="{'checked': isChecked, 'disabled': isDisabled}">
和像这样的条件(三元)运算符：
<div [ngClass]="isEmpty ? 'empty-class' : 'not-empty-class'">
有没有办法把多个条件和三元运算符结合起来？类似于以下内容，但不起作用：
<div [ngClass]="{'checked': isCh
浏览 19提问于2019-11-22得票数 2
我使用fetch从API检索数据，并将其存储在变量' data‘中。 然后将其映射到'character‘，我将其添加到我的react组件中 </Typography>
<Grid container spacing={3}>
{data.map((character) => (
<Grid item xs={12} sm={4} key={character.id}>
<Card className={classes.card}>
<C
浏览 21提问于2021-10-26得票数 0
如何在reactjs中使用三元操作当状态包含来自api调用的响应时，在react中调用三元运算符时出错jsx apiResults状态在api调用时存储响应，但可能没有响应或出现一些错误消息，如网络消息，所以我使用了一个简单的条件，但它失败了。 <Modal.Body>
{apiResults} ? <p>{apiResults.response}</p> : <p>Network Signal Issue Please Try Again</p>
</Modal.Body> 错误： index.js:1406
浏览 13提问于2020-04-25得票数 0
3回答
我检查一些数据，如门牌号，街道，城市等，如果这是未定义的。 如果我想检查城市是否未定义，为什么我的If检查不起作用？ ${typeof el.properties.city !== "undefined" ? el.properties.city : ''} console.log中的el.properties.city未定义。如果我在空字符串中获取el.properties.city，那么我将得不到定义。所以它是未定义的，但不起作用。他给我看了一个空字符串
浏览 11提问于2021-05-03得票数 1
我对reactjs非常陌生，我遇到了一个无法解决的问题！
我的应用程序有一个json数组，格式如下：
[
{"email":"sample1@sample.com", "mobile":"000000", "iscompleted":"false"},
{"email":"sample2@sample.com", "mobile":"000000", "iscompleted":"false"},
浏览 0提问于2020-04-20得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
