reactjs - 反应：TypeError：this.props.users.map 不是函数

问题描述

当我添加用户并提交用户详细信息时，它会重定向回“/”路由（应显示用户及其详细信息）并出现错误。我试过检查用户是否在场，然后只进行映射，但它不起作用。有人可以帮我解决这个问题，这样当我重定向回来时，它应该显示添加的用户。'/' 路径显示列表用户页面。

这是代码：

用户窗体.js

import React, { Component } from 'react'
import { Field, reduxForm } from 'redux-form'
import { connect } from 'react-redux'
import axios from 'axios'
import Checkbox from './Checkbox'

class UserForm extends Component {
    renderInput(formProps) {
        const className = `field ${formProps.meta.error && formProps.meta.touched ?
            'error' : ''}`
        return (
            <div className={className}>
                <label>{formProps.label}</label>
                <input {...formProps.input} type={formProps.type} max={formProps.max} autoComplete='off'
                    label={formProps.label} id={formProps.id}
                    checked={formProps.input.value} />
                {formProps.meta.touched &&
                    (formProps.meta.error && <span>{formProps.meta.error}</span>)}
            </div>
        )
    }

    onSubmit = (formValues) => {
        console.log('formValues', formValues)
        this.props.onSubmit(formValues)
    }


    render() {
        const { handleSubmit } = this.props
        const current = new Date().toISOString().split("T")[0]
        let optionsList = [{ id: 1, name: 'Travelling' }, { id: 2, name: 'Reading' }, { id: 3, name: 'Gaming' }]
        const colleges=['Pune University','S.P.College','F.C College']
        return (
            <div className='container'>
                <form onSubmit={handleSubmit(this.onSubmit)}
                    className='ui form error'>
                    <div className='row mb-3'>
                        <label className='col-sm-2 col-form-label'>FullName</label>

                        <div className='col-sm-10'>
                            <Field name='fullname' component={this.renderInput}
                                type='text' className='form-control' />
                        </div>
                    </div>
                    <div className='row mb-3'>

                        <label className='col-sm-2 col-form-label'>Address</label>

                        <div className='col-sm-10'>
                            <Field name='address' component={this.renderInput}
                                type='text' />
                        </div>
                    </div>
                    <div className='row mb-3'>

                        <label className='col-sm-2 col-form-label'>BirthDate</label>

                        <div className='col-sm-10'>
                            <Field name='birthdate' component={this.renderInput}
                                type='date'
                                max={current} />
                        </div>
                    </div>
                    <div className='row mb-3'>

                        <label className='col-sm-2 col-form-label'>Select Your Gender</label>

                        <div className='col-sm-10 ui radio'>
                            <div className='form-check'>
                                <label className='form-check-label'>Male</label>
                                <Field name='gender' component='input' type='radio' value='male'
                                    className='ui input' />{' '}
                            </div>
                            <div className='form-check'>
                                <label className='form-check-label'>Female</label>
                                <Field name='gender' component='input' type='radio' value='female'
                                />{' '}
                            </div>
                            <div className='form-check'>
                                <label className='form-check-label'>Other</label>
                                <Field name='gender' component='input' type='radio' value='other'
                                />{' '}
                            </div>
                        </div>
                    </div>
                    <div className='row mb-3'>
                        <label className='col-sm-2 '>Select Your Hobbies</label>
                        <div className='col-sm-10 ui checkbox'>
                            <Field name='roles' component={Checkbox} options={optionsList} type='checkbox' />
                        </div>
                    </div>
                    <div className='row mb-3'>
                           <label className='col-sm-2 col-form-label'>Select College</label>
                                <div className='col-sm-10'>
                                    <Field name='college' component='select'>
                                        <option value="">Select a college</option>
                                        {colleges.map(collegeOption => (
                                            <option value={collegeOption} key={collegeOption}>
                                                {collegeOption}
                                            </option>
                                        ))}
                                    </Field>
                                </div>
                            </div>

                    <button type='submit' className='ui button'>Submit</button>
                </form>
            </div>

        )
    }
}

const validate = (formValues) => {
    const errors = {}
    if (!formValues.fullname) {
        errors.fullname = 'You must enter a fullname'
    }
    if (!formValues.address) {
        errors.address = 'You must enter the address'
    }
    if (!formValues.birthdate) {
        errors.birthdate = 'Please select your date of birth'
    }
    if (!formValues.gender) {
        errors.gender = 'Please select your gender'
    }
    if(!formValues.college){
        errors.college='Please select your college'
    }
    return errors
}


export default reduxForm({
    form: 'userform',
    validate: validate
})(UserForm)

添加用户.js

import React, { Component } from 'react'
import { connect } from 'react-redux'
import { addUser } from '../../actions'

import UserForm from './UserForm'

class AddUser extends Component {
    onSubmit = (formValues) => {
        console.log('formValues', formValues)
        this.props.addUser(formValues)
    }
    render() {
        return(
            <>
            <div>Add User</div>
            <UserForm onSubmit={this.onSubmit}/>
            </>
        )
    }
}

export default connect(null, {
    addUser: addUser
})(AddUser)

ListUsers.js

import React, { Component } from 'react'
import {connect} from 'react-redux'
import {listAllUsers} from '../../actions'
import {Link} from 'react-router-dom'

class ListUsers extends Component {
    componentDidMount(){
        this.props.listAllUsers()
    }
    usersList(){
        return this.props.users && this.props.users.map((user)=>{
            return (
                <div key={user.id}>
                    <div>{user.fullname}</div>
                    <div>{user.address}</div>
                    <div>{user.birthdate}</div>
                    <div>{user.gender}</div>
                    <div>{user.hobbies}</div>
                    <div>{user.college}</div>
                    <div>{user.roles}</div>
                    <div>
                        <Link to={`/users/edituser/${user.id}`} className='ui button secondary'>Edit</Link>
                    </div>
                    <div>
                        <Link to={`/users/deleteuser/${user.id}`} className='ui button negative'>Delete</Link>
                    </div>
                </div>
            )
        })
    }
    render() {
        return (
            <div>
                <Link to='/users/adduser' >Add User</Link>
                <h1>Users List</h1>
                {this.usersList()}
            </div>
        )
    }
}

const mapStateToProps=(state)=>{
    console.log(state)
    return {users:state.users}
}

export default connect(mapStateToProps,{listAllUsers:listAllUsers})(ListUsers)

标签： reactjs

reactjs - 反应：TypeError：this.props.users.map 不是函数

问题描述

用户窗体.js

添加用户.js

ListUsers.js

解决方案

推荐阅读