map不是this.state.items上的函数
在React中，map不是this.state.items上的函数，而是JavaScript中数组的原生方法之一。它用于创建一个新数组，该数组的元素是通过对原始数组中的每个元素应用提供的函数进行转换得到的。
具体来说，map方法接受一个回调函数作为参数，并将该回调函数应用于数组中的每个元素。回调函数接受三个参数：当前元素的值、当前元素的索引和原始数组。回调函数可以返回一个新的值，该值将成为新数组中的对应元素。
map方法的语法如下：
array.map(function(currentValue, index, array) {
// 对当前元素进行处理，返回新的值
});map方法的优势在于它可以简化对数组的操作。通过使用map方法，我们可以遍历数组并对每个元素进行处理，而不需要显式地使用循环。这使得代码更加简洁、可读性更高。
map方法在前端开发中经常用于渲染列表或生成动态内容。通过将数组中的每个元素映射到相应的UI组件，我们可以轻松地创建动态的列表或视图。
在腾讯云的产品中，与map方法相关的产品可能是与前端开发或数据处理相关的。以下是一些推荐的腾讯云产品：
- 云函数（Serverless Cloud Function）：云函数是一种无服务器计算服务，可以让您在腾讯云上运行代码而无需管理服务器。您可以使用云函数来处理前端应用程序中的数据，并在需要时触发执行。
- 云数据库 MongoDB 版（TencentDB for MongoDB）：云数据库 MongoDB 版是一种全托管的 MongoDB 云数据库服务。您可以使用它来存储和处理前端应用程序中的数据，并使用适当的查询和操作来转换数据。
请注意，以上只是一些可能与map方法相关的腾讯云产品示例，并不代表完整的产品列表。具体的产品选择取决于您的需求和应用场景。
相关·内容
我有一个从API检索的数据数组中动态生成的输入列表。
我在数组上使用.map()来生成每个输入，并设置value={this.state.items[i]}和onChange属性(通过修改的handleChange来正确处理数组上的更改)。
现在，我设置了构造函数this.state = { items: [{}] }，但是由于我不知道要生成多少项，所以value={this.state.items[i].value}崩溃，因为this.state.items[n]不存在。
然后，解决方案是首先设置每个this.state.items[i] = {} (例如使用Array.push )，然后生
浏览 0提问于2019-09-05得票数 0
回答已采纳
1回答
我正在尝试为我的angular/react项目中的表实现内联编辑。我不能确切地理解如何在组件状态中定义的本地数组中进行更改？我没有使用任何数据库或server...and所有的例子都是使用db的。有人能帮帮忙吗？这是我的组件..
var DiaryTable = React.createClass({displayName: "DiaryTable",
getInitialState: function() {
return {
items : this.props.item,
globalChecked:
浏览 0提问于2016-08-12得票数 4
我正在尝试从我的待办事项列表中删除一个项目。到目前为止，这是我的代码。我认为我在父代码上做了一些错误的事情。我需要帮助。错误显示“未处理的拒绝(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状态的另一个对象。
handleDuplicate = (id, nextId) => {
let items = [...this.state.items];
let currentItem = this.state.items[id];
if (items && currentItem) {
console.log(currentItem); // --- logs object from react state properly
for (v
浏览 18提问于2020-02-06得票数 0
回答已采纳
对我来说，我不知道为什么我的react应用程序不能工作。我的输入状态get在onSubmit之后呈现。但是我的值不会在我的输入栏中消失。我的列表上什么都没有呈现。我只有在将组件分解成更小的块后才遇到这个问题，当它是一个完整的组件时，我可以毫不费力地工作。
class App extends React.Component {
constructor(props) {
super(props)
this.state = {
input: '',
items: []
}
this.handleChange = this
浏览 9提问于2018-09-02得票数 1
我创建了一个简单的React组件，它绑定到数组"items“。现在，通过单击"Add“按钮，在update基础状态中。状态正在更新，但不知何故，它的反应并不是自我再现。有人能帮忙吗？
interface IComponentState {
items: any[];
}
class UpdateArrayDemo extends React.Component<{}, IComponentState> {
constructor(props) {
super(props);
this.state = {
items: new A
浏览 1提问于2018-03-13得票数 0
我从WebAPI中获取这些数据，并希望在WebAPI中更新imageUri和employeeBio的值。我现在只能编辑Bio，现在我想发送PUT请求来更新imageUri和employeeBio的值，但是无法这样做。我的onPress方法“保存”按钮似乎也不起作用，因为当按下按钮时，我无法得到警报。谢谢!
这是url中存在的JSON数据。
[
{
"imageUrl": "https://upload.wikimedia.org/wikipedia/commons/thumb/a/a7/React-icon.svg/1200px-React-icon.svg
浏览 2提问于2020-01-17得票数 0
回答已采纳
我已经创建了一个简单的待办事项列表，添加项目是有效的，但是当我点击“删除”按钮时，我的项目并没有从列表中删除任何项目。我想知道我在我的代码中犯了什么错误，感谢所有我能得到的帮助。提前感谢！当然，我也尝试过在谷歌和Youtube上查找，但就是找不到我想要的答案。 链接：https://codesandbox.io/embed/simple-todolist-react-2019oct-edbjf App.js:
import React from "react";
import ReactDOM from "react-dom";
import "./
浏览 23提问于2019-10-09得票数 2
2回答
我试图表明，当过滤对象的大小为零时，没有数据可显示。有没有办法在调用filter方法后检查它的大小？
this.state.items
.filter(item => {
// filter code
})
.map(item => {
// display data
})
例如，this.state.items有十个项目，通过filter方法后变为零。我想在这里显示这条消息。
浏览 1提问于2017-03-30得票数 0
不知道它为什么这么说，但这是我认为它正在谈论的代码
setUpdate(text, key) {
const items = this.state.items;
items.map((item) => {
if (item.key === key) {
item.text = text;
}
});
this.setState({
items: items,
});
}
浏览 4提问于2021-05-14得票数 1
回答已采纳
我有一个问题，当一个函数在一个子组件中运行时，相同类型的所有子函数似乎也会运行相同的函数。下面是代码的样子：
class Wrapper extends React.Component {
...
constructor(){
this.state = { items:[...] }
}
render(){
return (
<div>
<Child id="child1id"... items={this.state.items}/>
<Child id="child2id
浏览 1提问于2018-12-04得票数 0
回答已采纳
2回答
我正在尝试迭代我的reactjs中的一个对象，但遇到了问题。它不显示任何内容。 这是小提琴- http://jsfiddle.net/8e039Ltw/ Reactjs代码：- class TodoApp extends React.Component {
constructor(props) {
super(props)
this.state = {
items: {'male':20, 'female':40}
}
}
render() {
return (
<di
浏览 17提问于2020-01-22得票数 1
2回答
我有一个状态数组，其中包含各种组件。当我单击其中一个组件上的remove按钮时，它将从数组中删除第一项。我似乎只有在使用数组中的组件时才有这个问题，它在字符串数组中工作得很好。
父组件：
addItem = (block) => {
const add = [...this.state.items, block];
this.setState({items: add})
}
removeItem = (index) => {
const remove = [...this.state.items];
remove.splice(index, 1);
this.
浏览 4提问于2018-11-26得票数 0
1回答
例如，我如何访问状态数组中的元素
this.state = {
items: [1,5,22,6],
}
在这里，我尝试设置一个类，如果id存在于项状态中
{this.props.data.map((row)=> (
<ul>
<li key={row.id} className={row.id === this.state.items ? 'complete' : 'pending'}" >{row.name}</li>
</ul>
))}
浏览 11提问于2018-02-12得票数 0
回答已采纳
我试图使用更短的版本重写对象的更新数组，但失败了，我有一个可用的版本，它在setState之前分配给一个临时变量。
//working version
const new_items = (this.state.new_items || []).map((o, i) => {
if(i === idx) {
return e.target.value
}
return o
})
this.setState({
items: new_items
})
//shorter version but why snytax error?
this.
浏览 12提问于2018-06-06得票数 2
回答已采纳
第二次单击该按钮后，地图上会出现标记。为什么？从api.In this.state.items下载数据，单击按钮后，数据即被放置。 state = {
items:[]
}
handleFetch = () => {
fetch('http://xxx)
.then(resposne => {
if (resposne.ok) {
return resposne;
}
throw Error(resposne.status)
})
.then(response
浏览 4提问于2020-04-29得票数 0
回答已采纳
我使用的是可排序的拖放，它工作得很好。问题是，我希望用户能够删除项目。SortableItem组件是不可访问的，因为它随代码一起提供，所以我不能传递将索引作为参数的事件处理程序。这是我到目前为止所知道的：
const SortableItem = SortableElement(
({value}) =>
<ul>{value}</ul>
);
const SortableList = SortableContainer(({items}) => {
return (
<ul>
{items.map((value, index) =&
浏览 19提问于2018-11-26得票数 0
我有一个组件，它在渲染时被调用了两次。从我的阅读来看，我假设这是由于React.StrictMode，但我实际上不确定。使用标记调用该组件 <UserPlaylist sortMode="new" tracks={this.state.items}/> 其中，this.state.items是包含要在UserPlaylist组件中映射的数据的大型对象。 UserPlaylist组件： import React, { Component } from 'react'
import Track from '../components/track
浏览 248提问于2021-10-05得票数 1
我创建了一个组件，它从服务器获取数据，然后在屏幕上显示数据。当我直接使用react原生视图时，屏幕看起来很好。
之后，我通过将代码片段移动到一个新组件(TwoGroupItemsView)来重构代码，使其可重用：
export class MainComponent extends Component {
componentDidMount() {
return fetch('https://mycompany.com/items')
.then(res => res.json())
.then(json => {
浏览 2提问于2018-03-24得票数 1
回答已采纳
1回答
我和我的团队正在开发一个Profile页面，它显示了Profile图片和Bio。我们使用expo图像选择库为用户选择他们想要的图像，并在应用程序上显示图像。我也想上传图像到s3，在那里，员工的图像将被存储。我现在面临的问题是，params.ImageUri给我的是本地文件，而不是s3链接。这就是我的功能。
我有一个selectImage()函数，它将触发用户从图库中选择图像。然后，数据将存储在this.state.items.imageUrl，中，这是来自Web的数据。调用此函数后，this.state.items.imageUrl的值就是本地文件。当用户按下其Profile Picture时
浏览 1提问于2020-01-20得票数 0
回答已采纳
我试图有条件地禁用OUIF DetailsList中某些行上的鼠标单击事件。但我似乎不能让它工作。我尝试覆盖onRenderRow并将CheckboxVisibility设置为none，但仍然可以单击。然后我试着用div包住它，并将其设置为disabled。但是，React中div似乎没有disabled属性。有人能帮我吗？
<DetailsList
items={this.state.items}
columns={this.getColumns()}
selection={this.selection}
sele
浏览 10提问于2017-08-16得票数 9
回答已采纳
我的反应完全是新的，我犯了这个错误。
由于此方法发生错误：
deleteItem = (index) => {
this.state.items.splice(index, 1),
this.setState({
items: this.state.items
})
}
我还使用@babel/plugin-提案-类-属性
如果我将按钮onClick事件更改为：
onClick={this.deleteItem.bind(index)}
它开始完美的工作，我不知道为什么。
整体代码示例
import React from &#
浏览 0提问于2019-09-14得票数 0
回答已采纳
2回答
我正在学习反应，并在想什么是最好的方式传递一个价值从孩子到家长？这是我的部件。
TodoItems ->应该将按钮的值传递给父级，这样我就可以从状态中删除项。
var TodoItems = createClass ({
render:function(){
var listItem = this.props.items.map((item) =>{
return <li key={item.key}> {item.text} <button onClick={this.props.removeItem} value={item.key
浏览 2提问于2017-05-13得票数 0
回答已采纳
我正在构建一个todo列表，我得到了一个更新，即将数据添加到本地存储中，以便如果刷新选项卡，则从本地存储中检索数据，问题是当第二个任务被添加时，第一个任务被上传到本地存储中。
functionToSetLocalStorage () {
console.log(this.state.items);
}
addItem(e) {
if (this._inputElement.value !== "") {
var newItem = {
text: this._inputElement.value,
浏览 2提问于2020-10-07得票数 1
回答已采纳
我正在学习ReactJS，但我只是偶然发现了这个错误，我找不出这个错误。
我想从子组件更改父组件的items数组状态。我尝试将addItem函数作为道具传递给children组件，在回车时，子组件调用此函数并传入输入值。
当我尝试在addItem方法中使用console.log(this.state.items)时，我得到了这个错误。
Uncaught TypeError: Cannot read property 'items' of undefined
主App.js
class App extends Component {
constructor() {
浏览 12提问于2017-03-02得票数 0
3回答
我正在努力找出使用修改对象数组中的每个值的最佳实践。
例如，如果我的状态是这样的话：
this.state = {
items: [
{
name: "test",
subItems: [
{val: false}, {val: true}, {val: false}
]
},
{
name: "test2",
subItems: [
浏览 1提问于2017-01-18得票数 3
回答已采纳
我正在编写一个简单的ToDo应用程序。
单击TodoItem应该会从状态中删除一个项目，但是当我这样做时，我将得到一个TypeError: this.state is undefined。我不知道是怎么回事。
我的代码如下所示：
- App.js
import React from "react";
import TodoItem from "./components/TodoItem";
class App extends React.Component {
state = {
items: {
item1: { text: "
浏览 0提问于2018-07-22得票数 1
回答已采纳
这是非常简单的todo列表应用程序，这是我的实践代码，正如您所看到的，我们有一个列表组件来显示项；当用户通过提交函数输入新数据时，将添加新项。
这一次，我试图删除项目，当span在李被点击，我认为我做错了。
我们如何将该事件附加到列表中？
这是我的App.js：
import React, {Component} from 'react';
import './App.css';
import List from "./components/List"
class App extends Component {
constructor(
浏览 0提问于2018-08-19得票数 0
回答已采纳
我正在创建一个应用程序，用户可以设计自己的表单。例如，指定字段的名称以及应包括哪些其他列的详细信息。
该组件可作为JSFiddle 使用。
我的初始状态如下所示：
var DynamicForm = React.createClass({
getInitialState: function() {
var items = {};
items[1] = { name: 'field 1', populate_at: 'web_start',
same_as: 'customer_name',
浏览 80提问于2015-04-09得票数 381
回答已采纳
以下react应用程序应在单击按钮时从RESTful应用程序接口获取数据，并将数据表示为ul：
import React from 'react';
import ReactDOM from 'react-dom';
class RestSample extends React.Component{
constructor(props) {
super(props);
this.state = { items: [] };
}
fetchHotels(event){
fetch(&#
浏览 12提问于2018-01-08得票数 1
回答已采纳
2回答
我将构造函数中的所有方法绑定到我的类中。其中一个不能正常工作，控制台记录一个未定义的错误。它是在一个函数中执行的，但是我以前将它声明为这个关键字作为一个类。我找不到这个问题。handleRemove是一种方法，我指的是。
import React, { Component } from 'react';
class ToDoList extends Component {
constructor(props) {
super(props);
this.state = {list: [], items: ''};
this.hand
浏览 0提问于2017-04-20得票数 0
回答已采纳
我有以下代码：
let getEntries = Object.entries(this.state.items).forEach(([key, value]) => {
let pos = value[1].location;
for (var lat in pos) {
let lt = ${pos[lat]};
this.setState({lat: this.state.lat.concat(lt)});
};
for (var lon in pos) {
let ln = ${pos[lon]};
浏览 1提问于2017-07-19得票数 1
我有一个由表单组成的Reminder component，其中我使用AsyncStorage存储了按钮的文本和日期onClick。
现在，我想在Agenda Component中显示这个存储的数据。
我使用的是react-native-calendars库中的Agenda component
这是我的reminder component
class Reminder extends Component {
constructor(props) {
super(props);
this.state = {
浏览 0提问于2018-12-08得票数 0
1回答
在<div className =" container ">下添加{this.state.items && this.state.items.length?时出现语法错误{}。当我移除这个极端的条件时，{this.state.items && this.state.items.length? : Components : <Preloader />一切正常，很多嵌套，我不知道问题到底出在哪里。我认为这是一种极端的情况。我希望在整个页面上呈现预加载器，而不是整个页面上的主要组件
class Items extends Co
浏览 3提问于2019-08-08得票数 0
回答已采纳
我正在使用React来呈现HTML内容。问题是，我无法理解代码的特定部分，它是做什么的。
如果您可以从下面的链接中看到Todo列表的基本示例
<script type='text/jsx'>
/** @jsx React.DOM */
var TodoList = React.createClass({
render: function(){
var createItem = function(itemText) {
浏览 6提问于2015-03-05得票数 22
回答已采纳
如何迭代和显示'grandChildren‘列表->中的每个元素，例如："AQ11“、"AS12”。谢谢。
responseData：
[{Key:"A",Value:["AQ11", "AS12"]}, {Key:"C",Value:["CN22", "CL33", "CV44"]}].
已将KeyValuePair的键设置为“子”，并将值设置为“grandChildren”状态。
我能够显示子值，但不能显示grandChildren，因为它返回值&#
浏览 1提问于2022-02-06得票数 0
回答已采纳
2回答
我试图在ReactJS中创建一个简单的Todo列表，当代码正常工作时，我很难理解一些代码。
“我的应用程序”由三个组件组成，即：
application.TodoList.js的入口点-呈现表单、按钮和TodoItem.js componentTodoItem.js -实际列表，它映射在输入文本上并显示列表.
我的TodoList.js组件：
import React, { Component } from "react";
import TodoItems from "./TodoItems";
class TodoList extends Componen
浏览 2提问于2020-01-09得票数 1
我想使用forEach或map循环一个数组，其中包含多个对象。这些对象有一个键price及其值。我正在尝试使用forEach，但我无法让它工作。这是我的组成部分：
import React, { Component } from 'react';
import {addCart} from './Shop';
import { connect } from 'react-redux';
export class Cart extends Component {
constructor(props) {
super(pr
浏览 1提问于2017-08-02得票数 0
回答已采纳
首先，我要：
constructor() {
super();
this.state = {
lists: ['Dogs','Cats'],
items: {Dogs: [{name: "Snoopy"}, {name: "Lola"}, {name: "Sprinkles"}],
Cats: [{name: "Felidae"}, {name: "Garfiled"}, {name:
浏览 3提问于2017-12-03得票数 18
回答已采纳
刚刚开始使用ReactJS和YouTube API自动从播放列表中提取视频。尝试将组件呈现在下面，但似乎无法访问组件内部状态中的“项”列表。请参阅下面的代码片段：
import React, { Component } from 'react';
import './App.css';
import $ from 'jquery';
class App extends Component {
constructor(props) {
super(props);
this.state = {}
}
componentD
浏览 5提问于2017-03-25得票数 0
回答已采纳
1回答
当我在React中构建我的第一个应用程序时，我在检查是否为空时遇到了一些困难。 这是构造函数 constructor() {
super()
this.state = {
id: '',
title: '',
price: '',
off_price: '',
category_id: '',
arttitle: '',
artbody: '',
shown: false
浏览 11提问于2019-04-20得票数 0
3回答
我已经创建了我的下拉菜单，但不幸的是它收到了来自API的重复值。我从BE收到一定数量的文档，其中一些具有相同的名称，因此在我的下拉列表中，我收到了重复的名称。我的代码如下所示：
我的函数
divideItems = () => {
let startIndex = ((parseInt(this.state.activePaginationTab) + 1) * this.state.rowsPerPage) - this.state.rowsPerPage;
let endIndex = (parseInt(this.state.activePagin
浏览 2提问于2019-08-06得票数 0
我被一个丑陋的问题困住了，我无法解决。我是反应的初学者。
这是我的密码
handleCheckChildElement(event) {
let items = this.state.items;
items.forEach(items = () => {
if(items.value === event.target.value) {
items.isChecked = event.target.checked;
}
});
this.setState({ items });
}
这是错误的图像-
浏览 0提问于2018-12-06得票数 3
回答已采纳
因此，我将遵循一个教程，使用rails api构建一个react列表。
当我试图向列表中添加任务时，它会呈现项目点，而不是文本。检查控制台，它告诉我错误是：
"Warning: Each child in a list should have a unique "key" prop.
但我很确定我已经给你分配了一个钥匙道具？
我检查了有关的代码行{this.state.items.map((item) => (<TodoItem key={item.id} item={item} >{item}</TodoItem>，它似乎是正确的，所以我
浏览 5提问于2022-09-06得票数 0
2回答
我知道变异状态可以对PureComponent (或类似的)起作用，还有其他原因不改变状态吗？
我想知道第三条路还行吗？
//正确的方式: //复制现有项目并添加一个新的addItemImmutably = () => { this.setState({ items：...this.state.items，this.makeItem() })；}；//错误的方式: //变异项并将其设置回addItemMutably = () => {this.state.items.push(this.makeItem()；this.setState({ items: this.state.it
浏览 3提问于2020-06-05得票数 1
回答已采纳
我使用一个名为SelectInput的组件来做Select的输入。
下面是我的代码：
'use strict'
import React from 'react'
class SelectInput extends React.Component{
constructor(props){
super(props);
this.state = {
select: "",
items: []
}
this.handleChange
浏览 0提问于2016-07-29得票数 0
回答已采纳
4回答
我很困惑，为什么react本机没有看到这个函数timeToString(time)在我的代码中定义和调用为一个函数。当应用程序运行时，函数不是一个函数，这是一个令人讨厌的错误。请协助。谢谢。
export default class AgendaScreen extends Component {
constructor(props) {
super(props);
this.state = {
items: {},
};
}
timeToString(time) {
const date = new Date(time);
浏览 1提问于2018-01-24得票数 0
回答已采纳
因此，我有这个待办事项列表应用程序与laravel后端和React，当我启动我的React应用程序时，它会显示以下内容： ./src/List.js
Line 126: Expected an assignment or function call and instead saw an expression no-unused-expressions
Search for the keywords to learn more about each error. 有人知道为什么会发生这种事吗？我尝试了所有的方法，但什么也没有发生，而且我还是个新手，我使用Laravel API rou
浏览 15提问于2019-08-23得票数 1
回答已采纳
const { items } = this.state;
this.setState({
items: this.state.items.slice(0, this.state.items.length - 1)
});
我知道上面的代码可以很好地反应。
然而，
const { items } = this.state;
items.pop();
this.setState({ items });
我只是不知道如果有一个由dom呈现的列表(比如<div className="list">{this.state.items}</div>)，为什么仍
浏览 0提问于2018-09-18得票数 4
回答已采纳
屏幕上未显示任何内容。不知道为什么会这样，任何地方都没有错误。想知道为什么屏幕上什么都没有显示。从API中正确获取数据。代码如下：
import React, { Component } from 'react';
import { StyleSheet, ScrollView, TouchableOpacity, Text, View } from 'react-native';
import { Container, Content, Grid, Row, Col } from 'native-base';
import axios from
浏览 1提问于2018-10-16得票数 3
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM活动推荐
腾讯云开发者
