React不会(在第一个go中)呈现在函数中定义的数组，甚至不会作为props传递
React不会在函数中定义的数组中呈现，甚至不会作为props传递。这是因为React组件的渲染是基于组件的状态和属性的变化来触发的，而不是基于函数内部的变量。
如果想要在React组件中呈现一个数组，可以将数组作为组件的状态或属性进行传递。然后在组件的render方法中使用map函数遍历数组，并返回相应的元素或组件。
以下是一个示例代码：
import React, { useState } from 'react';
function MyComponent() {
const [data, setData] = useState(['item1', 'item2', 'item3']);
return (
<div>
{data.map((item, index) => (
<div key={index}>{item}</div>
))}
</div>
);
}
export default MyComponent;在上述示例中，我们使用useState钩子来定义一个名为data的状态，初始值为一个包含三个字符串的数组。然后在组件的render方法中，使用map函数遍历data数组，并返回一个包含每个数组元素的div元素。
这样，当组件的状态发生变化时，React会重新渲染组件，并根据新的状态值重新呈现数组中的元素。
推荐的腾讯云相关产品：腾讯云云服务器（CVM），腾讯云云数据库MySQL版（CDB），腾讯云对象存储（COS）。
腾讯云云服务器（CVM）：https://cloud.tencent.com/product/cvm
腾讯云云数据库MySQL版（CDB）：https://cloud.tencent.com/product/cdb
腾讯云对象存储（COS）：https://cloud.tencent.com/product/cos
相关·内容
我有一个使用useState的组件。该状态是使用RouteComponentProps中的属性初始化的。当我在浏览器的地址栏中输入url时，它会起作用，但当URL被链接标签改变时，它就不起作用了。有什么关系呢？当链接标签改变url时，我如何设置状态？ 使用下面的代码并导航到/test1，显示该行中的test1/test1 {text}/{props.match.params.text} 按"go“链接将URL更改为/erik，但显示test1/erik。为什么？ interface RouteProps {
text: string | undefined
}
const
浏览 11提问于2019-04-03得票数 1
回答已采纳
我正在用PokeAPI做一个小的React应用程序，在使用splice()方法从数组(team)中删除一个元素(pokemon)时遇到了问题。无论我选择删除哪个元素，它都只删除数组中的第一个元素。 这是我用来删除项目的函数--通过props传递的。 removePokemon = (index) => {
const team = [...this.state.team]
team.splice(index, 1)
this.setState({team})
} 这是它实际使用的Team组件。 import React, { Component } from
浏览 49提问于2019-05-28得票数 1
回答已采纳
2回答
似乎我在React/Redux中遇到了一个非常常见的问题。有很多人都有这个问题，但原因可能有很大不同，所以我找不到可能的解决方案。我正在尝试建立一个具有列表的网页，该列表可以通过按向上和向下按钮重新排序。
我已经设法跟踪更新的状态(数组)，直到reducer，但组件没有更新。我认为我没有正确地更新组件的状态。
下面是我的组件：
import React, { Component } from 'react';
import { connect } from "react-redux";
import { bindActionCreators } from
浏览 4提问于2018-02-05得票数 0
回答已采纳
在react本机中，我正在执行控制台日志，如下所示：
console.log(props);
我正在获得堆栈导航的完整对象导航。
但当我这么做的时候
console.log(JSON.stringify(props));
我正在获取未定义或空的导航对象。
截图附呈
浏览 3提问于2020-07-09得票数 1
回答已采纳
1回答
这是一个使用状态和setState的类组件，但我想使用useState。此外，除了能够使用功能组件而不是基于类的组件之外，还有什么好处？
import React, {Component} from "react"
class Toggler extends Component {
state = {
on: this.props.defaultOnValue
}
toggle = () => {
this.setState(prevState =>
浏览 13提问于2020-02-05得票数 0
回答已采纳
1回答
我不明白为什么行组件呈现8次。我应该使用自定义比较功能在这个组件的反应备忘录吗？我正在使用包。请解释一下它是如何为我工作的。非常感谢。
ListView的父组件：
我的整个项目：
这是我的密码：
import React, { useRef, memo, useEffect } from 'react';
import { FixedSizeList as FixedList, areEqual } from 'react-window';
import './ListView.scss';
const ListView = (props) =
浏览 5提问于2020-05-01得票数 0
回答已采纳
在如下所示的函数式react组件中，如何访问从redux存储传来的道具，类似于如何访问componentDidMount()中类组件的this.props，如下面的注释所示？ import React from 'react';
import { connect } from "react-redux";
import * as actions from "../../actions";
const ComponentName = () => {
// componentDidMount() {
// this.p
浏览 17提问于2020-07-05得票数 0
回答已采纳
我有一个数组，我有两个组件(子组件和父组件)。我在父组件中迭代数组，我渲染子组件，我用数组中的数据给它们道具。
子组件将其道具转换为状态，然后递增和递减该状态。
父组件可以将新项添加到数组中并重新呈现。但。如果我取消了数组前面的新项的移位( unshift() )，我会将数组中的最后一项添加到屏幕上，而不是将新项添加到前面。
问:为什么用.push()渲染效果好，而用.unshift()渲染效果差？同样，使用concat和newItem，...oldArray一切都可以，但是当我在数组前面添加项时，相同的东西就不好了？另外，如何正确地.unshift()新的项目(评论，计数器，图片，帖子，如任
浏览 12提问于2017-07-20得票数 4
我是新来的。我刚刚创建了一个名为TodoList的React应用程序。在我的src/mycomponents中，我有四个文件Header.js、Todos.js、TodoItem.js和Footer.js。我做了一些玩具，试着展示一下。但我没有得到任何东西。我没有收到任何错误。我面临的唯一问题是我没有得到任何列表项目。
我的App.js
import "./App.css";
import Header from "./MyComponents/Header";
import {Todos} from "./MyComponents/Todos"
浏览 1提问于2021-05-24得票数 0
回答已采纳
我有一个react组件，它呈现一个封面列表和一个从list onClick中删除图书的按钮。我是在通过地图发送到道具删除操作和书架信息通过地图状态到道具。删除操作正在成功地从数据库中删除图书，并且正在击中我的还原器。但是即使状态更新，图书列表组件也不会重新呈现(除非我重新加载，否则删除的书不会消失)。
import React from 'react';
import { Link, withRouter } from 'react-router-dom';
import {CarouselProvider, Slider, Slide, ButtonBac
浏览 2提问于2017-10-21得票数 1
我正在React-Native上创建一个存储卡游戏，我正在使用翻转动画的存储库。
在级别1中，当我匹配所有卡片时，我将状态设置为更改级别，而在级别2中，卡片仍然翻转，然后我希望处于初始状态。
解算前的级别1：
解算级别1之后的级别2：
我想要的是在级别2上，它应该像最初一样渲染导入的CardFlip组件绘图卡片背面(就像在级别1中一样)。
我使用的是react-native，而不是expo。将我的代码放在App.js文件中，导入卡片翻转存储库，并使用react-native运行-android这段代码。
import React, { Component } from 'react
浏览 0提问于2018-11-20得票数 0
在React的在线教程中，将指导您使用以下代码创建一个tic tac toe游戏： import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
function Square(props) {
return (
<button className="square" onClick={props.onClick}>
{props.value}
<
浏览 18提问于2021-08-16得票数 0
回答已采纳
对于使用componentDidMount和setState更新自定义组件来说，我还很新鲜，这似乎是推荐的方法。下面是一个示例(包括一个获取数据的axios API调用)：
import React from 'react';
import {MyComponent} from 'my_component';
import axios from 'axios';
export default class Example extends React.Component {
constructor(props) {
sup
浏览 0提问于2016-11-18得票数 14
回答已采纳
我不确定为什么我会得到这个错误： TypeScript error in /home/amanuel2/tutorial/go/react-go/src/frontend/src/App.tsx(34,15):
Type '{ props: string[]; }' is not assignable to type 'IntrinsicAttributes & string[]'.
Property 'props' does not exist on type 'IntrinsicAttributes & stri
浏览 207提问于2020-12-13得票数 3
回答已采纳
我发现React.forwardRef似乎是从react文档中将ref传递给子功能组件的认可方式：
const FancyButton = React.forwardRef((props, ref) => (
<button ref={ref} className="FancyButton">
{props.children}
</button>
));
// You can now get a ref directly to the DOM button:
const ref = React.createRef();
<F
浏览 1提问于2019-10-27得票数 88
回答已采纳
我有下面的react可重用组件，我可以在react-router-dom中使用它作为react组件吗？我是个新手，非常感谢你的help. 当我使用这段代码时，我得到错误: var Component：((props: Props) => JSX.Element) | JSX.Element JSX元素类型'Component‘没有任何构造或调用签名。 const ImageFirst = ({ imgSrc, title, desc, link, linkTitle }: Props) => {
return (
浏览 29提问于2021-02-25得票数 2
回答已采纳
我如何才能在react中访问this.props，但没有render方法？在带有常量变量的函数方法中？当我执行console.log(this.props)时，我得到一个错误。 const TopBar = ({ className, ...rest }) => {
const classes = useStyles(); const [anchorEl, setAnchorEl] = React.useState(null); const open = Boolean(anchorEl); const [lan ,setLan] = React.useState('EN&#
浏览 52提问于2020-11-06得票数 1
回答已采纳
1回答
我在react-native上上了一门在线课程，我对老师使用的参数传递练习很好奇。
指导员有一个内容数组( DATA )，每个元素都是SomeModel类的实例。在从AScreen导航到BScreen时，他将有效的SomeModel对象的id作为参数BScreen传递给props.navigation.navigate()方法。然后，在定义DATA的文件中导入相同的BScreen数组，并在DATA上使用find()方法检索相关对象。(即使用通过props.navigation.getParam()方法获得的ID )
作为AScreen，触发导航的特定按钮也可以访问DATA和特定对象(例如，有一
浏览 4提问于2020-05-11得票数 3
我需要移动列表上的项目时，他们是点击。我试过更新这个州，但没有奏效。
import React from "react";
import ReactDOM from "react-dom";
// props is an array of items
const List = (props) => {
// Move the items up when they are clicked
const { items } = props;
const [index, setIndex] = React.useState(0);
con
浏览 7提问于2022-09-22得票数 0
在官方的中，他们首先编写类组件：
class Square extends React.Component {
render() {
return (
<button className="square" onClick={() => this.props.onClick()}>
{this.props.value}
</button>
);
}
}
然后让它成为一个功能组件
function Square(props) {
return (
<button className=&
浏览 0提问于2019-08-12得票数 0
回答已采纳
我是react的新手，如果我没有在脚本中的好位置发帖，很抱歉，我只想在其他coponant中传递一个数组(对不起我的英语)我的代码
class ListItem extends React.Component {
constructor(props) {
super(props)
}
render() {
// Correct! There is no need to specify the key here:
return <li>{props.value}</li>;
}
}
class NumberList extend
浏览 6提问于2020-09-13得票数 1
我想在我的函数中基于as={""}属性创建a、b、div或其他元素。
我正在检查as，然后使用if guards逐个创建元素。但是有没有办法创建基于组件的html元素呢？
我希望能够在没有if的情况下创建b, a, h4 h3或任何元素
我发现了类似的问题，但它使用了样式化的组件。有没有可能没有它呢？
目前我正在做这件事：
import * as React from 'react'
interface Props {
children: (React.ReactChild | React.ReactNode) | (React.ReactChild[]
浏览 6提问于2020-03-14得票数 1
回答已采纳
有办法用MenuItem嵌套下拉组件吗？当我需要使用下拉列表而不是嵌套两个时，我想声明一个组件。我是在正确的路径上，还是应该以与正常反应组件不同的方式处理下拉组件？
App.js (目前正在DropDown中嵌套MenuItem )
<DropDown
label="Drop Down Label"
value={this.state.selectedState}
onChange={this.handleChange}
>
{stateAbbreviationData.map(option => (
<MenuItem key=
浏览 1提问于2018-05-05得票数 2
回答已采纳
2回答
在组件中使用两个道具
、、、、
我想在grap_test组件中使用两个道具，一个道具来自test.js组件，另一个来自App.js。我尝试在graph_test.js中调用它们，并在一个临时示例中使用它们，查看它们是否被传递。
然而，它说：
TypeError:无法读取未定义的属性“映射”
在graph_test的17号线上。
大家都有什么建议吗？
Graph_Test：
import React from 'react';
import $ from "jquery";
//<h1>{props.testing.map}</h1>
const Graph_Test =
浏览 3提问于2020-04-11得票数 0
回答已采纳
我已经编写了一个工作很好的登录组件，但当登录成功时，我无法找到移动到登录页面的正确方法。
我知道在某种程度上会涉及：
if (this.props.user) {
this.props.navigation.navigate("Main");
// I'm using react-native-navigation. But any implementation of "now go to the home page" would go here.
}
我试着把它放在我的render方法的顶部，这个方法可以工作，但是我确实
浏览 2提问于2019-06-02得票数 1
回答已采纳
2回答
更新:我从this.props中删除了这个。但是现在在本地却什么也没有显示出来。
我正在尝试写一个博客页面的反应。这是我的blog.js：
import React from 'react'
const Blog=props=>{
const {title,author,content}=this.props
return(
<div>
<h2>{title}</h2>
<h5><i>{author}</i></h5&
浏览 5提问于2020-03-17得票数 0
回答已采纳
我正在尝试用jest在应用程序中创建一个测试，这是我的代码中的几行：
import React, { Component } from 'react';
import {...} from 'react-native';
import jwt_decode from 'jwt-decode';
class CreateProduct extends Component {
constructor(props) {
super(props);
this.keyboardHeight = new Animated.Value(0);
t
浏览 0提问于2018-11-09得票数 0
回答已采纳
3回答
，我得到了这个错误，'TypeError:调度不是一个函数‘，我做错了什么？我读过redux的文档，但我看不出我做错了什么？(redux的初学者)错误在inputIsValid方法中
import React from 'react';
import { connect } from 'react-redux';
import { validatedAuthInput } from '../actions/index';
class AuthInput extends React.Component {
constructor(
浏览 1提问于2018-01-22得票数 4
回答已采纳
任何有过这种经历的人，我都不知道如何在Typescript中声明Select属性。请帮帮我！
import React from 'react'
import Select, {components, IndicatorProps} from 'react-select'
import {connect} from 'react-redux'
import ArrowDropDownIcon from '@material-ui/icons/ArrowDropDown';
import { Users } from '
浏览 1提问于2020-10-01得票数 0
我正在连接我的组件，并绑定我的actionCreators。这是一个类似的模式，我已经采取了一个组件的工作。我使用一个react表来调用我的click事件，但是我在表之外调用我的redux操作，以避免任何干扰。以下是我组件的代码：
import React, {Component} from 'react';
import {connect} from 'react-redux';
import ReactTable from "react-table";
import {withRouter} from 'react-router-do
浏览 0提问于2018-02-23得票数 0
在一个数组中，我将其显示为一个组件(Box.js)上的列表，并存储在另一个组件(Search.js)中的react-select中。它们都是属于父组件(trial.js)的同一级别的子项。
最终，我希望通过从列表中单击或从react-select中更改/选择来显示对象。我已经将事件处理程序提升到它们的父级，并成功地独立显示了所选对象。
但是，我似乎无法将onClick与onChange同步。具体来说，我希望click事件处理程序将选定列表设置为粗体，并更改react-strap中显示的项，反之亦然。react主页中给出的提升状态和同步事件处理程序示例使用文本输入，这对我正在尝试做的事情没有真正
浏览 7提问于2018-09-07得票数 0
2回答
我目前正在建设一个购物网站。我完成了主页，我必须为其他页面进行路由，我有三个主要文件: App.js、Menuitem.js (用于执行道具)和Homepage.js (也用于从包含标题、背景图像和节路径的区段数组中应用执行道具)。
这是App
import React from "react";
import Homepage from './Homepage'
import "./styles.css";
import './Homepage.css'
import {Route, Switch} from "reac
浏览 2提问于2020-11-17得票数 0
回答已采纳
2回答
我已经将数据存储在一个文件(details.js)中，作为一个JavaScript对象，然后我尝试将它作为一个道具从MainComponent传递到ChildComponent。这个道具在ChildComponent中是可以访问的，但是我可以用props.ChildDetails[0].name而不是props.name直接访问它，如中所示
我遗漏了什么？
details.js
export const DETAILS=[
{
id:0,
profile:'/assests/images/john.png',
name:&
浏览 2提问于2021-01-30得票数 0
回答已采纳
是否可以根据在React Navigation中按下哪个按钮来处理下一个屏幕值，
我像我一样搜索过任何可能的重复问题，但花了几个小时还没有找到。
假设我有这样的密码：
import React from 'react';
import { Button, View, Text } from 'react-native';
import { StackNavigator } from 'react-navigation';
class HomeScreen extends React.Component {
render() {
re
浏览 0提问于2018-04-23得票数 0
回答已采纳
2回答
在reactjs上，我如何能够再次setNotify组件上的状态？
import React, { useState } from 'react'
const NotificationError = (props) => {
const [notify, setNotify] = useState(false);
// if (props.message === "") {
// props.message = "Some Error"
// }
// if (props.messag
浏览 3提问于2020-10-22得票数 0
1回答
下面是父组件和子组件，我只想在父组件中更改状态后更新子组件。
我正在创建一个表，该表是子组件，并将数据从父组件传递到子表，并触发从子到父的删除函数。数据在父文件中被删除，但没有发送给子数据。
任何帮助都是值得赞赏的！！
父级
import React, { useState } from "react";
import Pagination from "./components/Pagination.js";
import { Table } from "./components/Table.js";
import { useEffect } f
浏览 14提问于2022-06-22得票数 0
回答已采纳
1回答
我的问题是关于React添加和编辑项目。我想在数组中添加对象(数组中包含数量，amountUnit，名称的对象) console.log可以，但对象没有添加。在我的表单中，a不能显示此函数的结果。我想从API添加配料列表的新对象。我不知道我是否有不好的道具或状态
import React, { Component } from "react";
import {
FormGroup,
FormControl,
ControlLabel,
InputGroup
} from "react-bootstrap";
export default c
浏览 0提问于2019-02-08得票数 2
我正在尝试从我的待办事项列表中删除一个项目。到目前为止，这是我的代码。我认为我在父代码上做了一些错误的事情。我需要帮助。错误显示“未处理的拒绝(TypeError)：无法读取未定义的属性'props‘” import React from "react";
const List = props => (
<ul>
{props.items.map((item, index) => (
<li key={index}>
<input
onClick={this.pro
浏览 15提问于2019-03-21得票数 1
回答已采纳
我正在尝试将"react-google-maps“集成到我的应用程序中，以显示地图。我在理解他们的标记系统时遇到了最大的困难。
我能够显示我的地图，并让我的所有标记正确显示。下一步是我遇到问题的地方。我需要能够点击每个标记，并知道什么标记是被点击的。我已经注释了以下代码，以显示我现在尝试在我的控制台中显示的道具。我想我只需要在事件中传递另一个参数，但我不知道如何做到这一点。老实说，现在我相信我正在传递事件侦听器，但当我记录'e‘变量时，我甚至不能完全确定我看到的是什么。
您可以在我的github中看到我到目前为止拥有的内容。如果您单击标记，您将看到我正在记录的内容。
请帮帮
浏览 0提问于2017-12-01得票数 3
12回答
使用React传递数据-本机导航
、、、、
我试图在我的应用程序的屏幕之间传递数据。目前我正在使用
"react-native": "0.46.0",
"react-navigation": "^1.0.0-beta.11"
我有我的index.js
import React, { Component } from 'react';
import {
AppRegistry,
} from 'react-native';
import App from './src/App'
浏览 8提问于2017-07-14得票数 22
回答已采纳
我是react native的新手，我真的不知道如何使用props.I。我有两个组件是父组件和子组件。那么如何在parent中获取状态呢？
我试着在这里读了很多答案，读了很多文档，但对于我来说，道具是非常难的。
import React from 'react';
import { View, Text, Button } from 'react-native';
import {
createAppContainer,
createStackNavigator,
StackActions,
NavigationActions,
} from &
浏览 2提问于2019-08-08得票数 1
当我调度加载器的操作时，当我在redux logger中看到时，reducer正在更改状态，但它没有被控制台记录在我何时调度更改状态的操作旁边的行中。 import React from 'react';
import { useEffect } from 'react';
import { useState } from 'react';
import {connect} from 'react-redux';
import {loader} from "../../actions/loaderAction";
浏览 11提问于2021-01-17得票数 0
回答已采纳
1回答
反应GitHub回购API
、、、、
我正在做一些工作，允许用户输入用户名，并将该用户的所有github repos显示在repolist组件中的一个单独的react组件中。
我可以获得所有repos的JSON数据，但我不能遍历对象来显示每个回购的卡片，我不知道如何引用嵌套在对象中的数据。
我应该注意到，testData最初充满了测试数据，我只能作为一个一维数组，而不是一个对象来工作。
App.js：
import React from 'react';
import { CardList } from './Components/CardList.js';
import {
浏览 1提问于2019-12-13得票数 1
回答已采纳
我使用的是react-navigator 4.x，我只有一个页面要导航，但当我单击’})}} title="Go To“/> in photos页面时，我得到了这样的错误： import React, { useEffect, useRef } from 'react';
import { View, Button, Text, StyleSheet, TouchableOpacity } from 'react-native';
import 'react-native-gesture-handler';
const Nex
浏览 23提问于2021-09-27得票数 0
回答已采纳
嘿，伙计们，我有一个状态，我想把它存储在数组中，我该怎么做？我想把它作为props传递给另一个组件，可以在数组中传递props吗？
或者我必须将这个状态存储在传递它的数组中？
请告诉我。
这是我的代码：
import React, { Component } from 'react'
export default class Join extends Component {
constructor(props)
{
super(props)
this.state={
Rid:'',
Rname:'',
Rgender:'&#
浏览 0提问于2018-03-14得票数 0
3回答
import React from "react";
import styles from "../articles.css";
const TeamInfo = props => (
<div className={styles.articleTeamHeader}>
<div className={styles.left}>
style={{
background: `url('/images/teams/${props.team.logo}')`
}}
浏览 48提问于2018-07-11得票数 -1
回答已采纳
最近，我开始使用React，并希望构建一个小应用程序来获取天气数据。我的API有一个返回自动完成建议的函数。因此，当我的自动建议数组不为空时，我呈现一个列表，在单击其中一个<li>'s时，我想要输入框中的值。我设法设置了我的SearchBar的状态，但是不能改变它的值。
编辑：我试着把自己的价值从changeState()变成<input type="text" placeholder="City, Zip Code, Coordinates" onChange={evt => this.updateInputValue(evt)
浏览 0提问于2018-08-17得票数 0
回答已采纳
希望你能帮我解决一个我有点麻烦的bug。我正在处理一个使用React Native构建的应用程序中的错误。它是为IOS和Android构建的。我在一个组件中有一个ScrollView，该组件包含作为可拖动对象的卡片。
这些卡片是从它们所在的ScrollView中拖到屏幕顶部的桶中的。它们从ScrollView中消失，而其余的则重新组织，以便它们保持有序和整洁。这很好用，您可以按下列表中的一个框并将其拖动到存储桶中。
在ScrollView中的卡列表上方有一些空格。当在方框上方的空白区域内滑动时，ScrollView功能可以工作，但我无法在方框上滑动，除非它开始拖拽卡片。
下面是组件本身：
im
浏览 0提问于2017-11-03得票数 2
2回答
在下面的userId场景中，如何将变量从“父”组件传递给“子”组件？
我有一个“父”组件，如下所示：
export class UserProfileScreen extends React.Component {
constructor(props) {
super(props);
this.state = {
userId: 123,
}
}
render() {
return(
<View>
<Us
浏览 0提问于2018-10-06得票数 0
/这是主屏幕，在这里我尝试转到“组件”。它不能识别'props.navigation.navigate
import React from 'react';
import { Text, StyleSheet, View, Button, TouchableOpacity } from 'react-native';
const HomeScreen = props => {
return (
<View>
<Text style={styles.text}>Hi there !</Text&
浏览 2提问于2019-09-10得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
腾讯会议
实时音视频活动推荐
腾讯云开发者
