Реагировать на избыточность, не показывая содержание карты

Question

React Redux не отображает данные содержимого карты. Этот код ниже работает путем публикации данных формы в базе данных. Моя проблема заключается в том, что он не отображает содержимое карты в методе возврата, как показано в приведенном ниже коде, и не отображает никаких ошибок. сообщение в консоли. Infact содержание карты пусто.

<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>

В некоторых публикациях здесь Stackoverflow предлагается убедиться, что все они не пропустили ответное заявление list.map не отображается в React Component

вот основной код

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>
        );
    }
}

Обновления

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 };

Вот 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.users () я написал userAction.register_upload () . В двух словах, это должно быть

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>
})}