无法在对象数组上使用map函数

时间:2020-10-23 00:53:21

标签: javascript reactjs

TypeError:this.state.users.map不是函数

我已按照教程将其重写了几次,但仍然出现相同的错误。它指向divMapper中的标签,但我不确定它要告诉我什么

这是App组件:

import React, { Component } from 'react'
import User from './Components/User'

class App extends Component {
    state = {
        users: [
            {name: 'user1', id: '001'},
            {name: 'user2', id: '002'},
            {name: 'user3', id: '003'},
        ]
    }

    nameChangeHandler = (event, id) => {
        const userIndex = this.state.users.findIndex(userName => {
            return userName.id === id
        })

        const user = {...this.state.users[userIndex]}
        user.name = event.target.value
        const userList = {...this.state.users}
        userList[userIndex] = user

        this.setState({
            users: userList
        })
    }
    render() {
        let divMapper = (
            <div>
                {this.state.users.map(person => {
                    return <User 
                                name={person.name} 
                                id={person.id}
                                changed={event => this.nameChangeHandler(event, person.id)}
                            />
                })}
            </div>
        )

        return (
            <div>
                {divMapper}
            </div>
        )
    }
}

export default App

这是用户组件:

import React from 'react'

function User(props) {
    return (
        <div>
            <input
                type="text"
                placeholder="type here..."
                onChange={props.changed}
            />
            <p>{props.name}</p>
        </div>
    )
}

export default User

TypeError:this.state.users.map不是函数 我已经按照教程进行了几次重写,但是我仍然遇到相同的错误。

它指向divMapper中的标签,不确定它要告诉我什么

0 个答案:

没有答案