Question

React Redux not displaying Map content data This code below works by posting form data to database. My problem is that its not displaying the map content in the return method as per code below and its not showing any error message in the console. Infact the map content is empty.

<ul>
    <h1>Jmarkatti </h1>
    {users.items4 && users.items4.map((user, index) =>
        <option key={user.uid} value='{ user.uid }'>Hey jmarkatti { user.filename} { user.uid }</option>
        )}
</ul>

Some Post here at Stackoverflow suggest ensuring that all the one doe not miss the returning statement list.map not being displayed in React Component

here is the main code

import React, { Component } from 'react';
import { Link } from 'react-router-dom';
import { connect } from 'react-redux';
import { uActions } from '../_actions';

class FileRegister extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            user: {
                firstName: '',
            },
            submitted: false
        };
        this.handleChange = this.handleChange.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);
    }

    handleChange(event) {
        const { name, value } = event.target;
        const { user } = this.state;
        this.setState({
            user: {
                ...user,
                [name]: value,
            },
        });
    }

    handleSubmit(event) {
        event.preventDefault();
        this.setState({ submitted: true });
        const { user_upload } = this.state;
        const { dispatch } = this.props;
        if (user.firstName) {
            dispatch(userActions.register_upload(user));
        }
    }
    render() {
        const { user, users } = this.props;
        const { registering } = this.props;
        const { user, submitted } = this.state;
        return (
            <div className="col-md-6 col-md-offset-3">
                <ul>
                    <h1>Jmarkatti </h1>
                        {users.items4 && users.items4.map((user, index) =>
                        <option key={user.uid} value='{ user.uid }' >Hey jmarkatti {user.filename} {user.uid}</option>
                    )}
                </ul>
                <h2>Form submission</h2>
                <form name="form" onSubmit={this.handleSubmit}>
                    <div className={'form-group' + (submitted && !user.firstName ? ' has-error' : '')}>
                        <label htmlFor="firstName">First Name</label>
                        <input type="text" className="form-control" name="firstName" value={user.firstName} onChange={this.handleChange} />
                        {submitted && !user.firstName &&
                            <div className="help-block">First Name is required</div>
                        }
                    </div>
                    <div className="form-group">
                        <button className="btn btn-primary">Register</button>

                        <Link to="/login" className="btn btn-link">Cancel</Link>
                    </div>
                </form>

            </div>
        );
    }
}

Updates

function mapStateToProps(state) {
    const { registering } = state.users;

 const { users} = state;
 const { user} = state;




    return {
        registering,
user,
users


    };
}

const connectedFileRegister = connect(mapStateToProps)(FileRegister);
export { connectedFileRegister as FileRegister };

Here is the reducer.js

import { uConstants } from '../_constants';
export function users(state = {}, action) {
    switch (action.type) {
        case userConstants.REGISTER_REQUEST:
            return { registering: true };
        case userConstants.REGISTER_SUCCESS:
            return { items4: action.users };
        //return{};
        case userConstants.REGISTER_FAILURE:
            return {};
        default:
            return state
    }
}

Answer 1

由于存在错误，该问题已在dispatch（）方法中解决。我写了 userAction.register_upload（），而不是 userAction.users（）。简而言之，应该是

dispatch(userActions.users(user));

不是

 dispatch(userActions.register_upload(user));

如果您查看上面发布的 reducer.js 的第二行代码，则会发现根据以下代码将导出功能设置为用户

export function users(state = {}, action) {

地图内容正在运行。谢谢大家之间

Answer 2

迭代users.items4的方式不会返回您期望的<option>项。更改为

{users.items4 && users.items4.map((user, index) => (
  <option key={user.uid} value={user.uid} >Hey jmarkatti {user.filename} {user.uid}</option>
))}

或

{users.items4 && users.items4.map((user, index) => {
  return <option key={user.uid} value={user.uid} >Hey jmarkatti {user.filename} {user.uid}</option>
})}

React redux not showing the map content

2 个答案: