Реагировать: состояние фильтра

Question

Я хочу попросить вас о небольшой помощи. Я не знал, как установить заголовок для моей проблемы. Я новичок в React, Redux Coding и у меня есть эта проблема: у меня есть форма для добавления нового платежа с опциями Select +. Опции генерируются из «пользователей», которые я загружаю из API, и сохраняю их в своем хранилище редуксов. Значение каждого параметра - user.id. Итак: я хочу настроить вещь - когда я выбираю пользователя в форме выбора, я хочу показать его платежную информацию (в таблице пользователей у меня есть: mail, pass, ..., pay). Платеж должен быть вставлен в таблицу платежей, где у меня есть строки: id, user_id, date. Итак, мой вопрос: как прочитать этот «pay» prop в зависимости от user_id.

Я был бы очень рад, если бы кто-нибудь мог мне помочь. Спасибо. Вот код моего файла NewPayment. js. Конечно, это все еще в режиме прогресса :)

   import React, { Component } from "react";
import {connect} from "react-redux";
import PropTypes from "prop-types";
import {getAllUsers} from "../../store/actions/userActions";
import {getUserById} from "../../store/actions/userActions";

class NewPayment extends Component {


    componentDidMount() {
        this.props.getAllUsers();

    }

    state = {
        user_id: 0,
        date: new Date().getDate() + '/' + (new Date().getMonth()+1) + '/' + new Date().getFullYear(),
        pay: 0,
        id: 0,
    }


    handleChange = (e) => {
        this.setState({
            [e.target.id]: e.target.value,
        })
    }

    handleSubmit = (e) => {
        e.preventDefault();
        const { users } = this.props.users;


        const newPayment = {
            date: this.state.date,
            user_id: this.state.user_id,
            pay: 
        };
        console.log(newPayment);

    }

    render() {

        const { users } = this.props.users;
        return (
            <div className='container dashboard'>
                <form onSubmit={this.handleSubmit}>
                    <h2>Nová platba</h2>
                    <div className="form-group">
                        <label htmlFor="user_id">User</label>
                        <select className="form-control" id="user_id" onChange={this.handleChange}>
                            <option>Select an option</option>

                            { users.map(user => {
                                return (
                                    (user.pay>0) ? <option key={user.id} value={""+user.id+""
                                    }>{user.name + ' ' + user.lastname}</option> : ''



                                )
                            })}
                        </select>
                    </div>
                    <div className="form-group">
                        <label htmlFor="pay">Pay</label>
                        <input type="text" className="form-control"
                              disabled value=''
                            />
                    </div>
                    <button type="submit" className="btn btn-primary">Add</button>
                </form>
            </div>
        )
    }

}

NewPayment.propTypes = {
    getAllUsers: PropTypes.func.isRequired,
    users: PropTypes.object.isRequired
};


const mapStateToProps = state => {
    return {
        users: state.user

    }
}

export default connect(mapStateToProps, { getAllUsers, getUserById })(NewPayment);

Answer 1

Сначала добавьте свой конструктор с помощью реквизита, а затем посмотрите, сможете ли вы решить другие проблемы, иначе оставьте комментарий.

import React, { Component } from "react";
    import {connect} from "react-redux";
    import PropTypes from "prop-types";
    import {getAllUsers} from "../../store/actions/userActions";
    import {getUserById} from "../../store/actions/userActions";

    class NewPayment extends Component {
     constructor(props){
    state = {
            user_id: 0,
            date: new Date().getDate() + '/' + (new Date().getMonth()+1) + '/' + new Date().getFullYear(),
            pay: 0,
            id: 0,
        }

    }

        componentDidMount() {
            this.props.getAllUsers();

        }




        handleChange = (e) => {
            this.setState({
                [e.target.id]: e.target.value,
            })
        }

        handleSubmit = (e) => {
            e.preventDefault();
            const { users } = this.props.users;


            const newPayment = {
                date: this.state.date,
                user_id: this.state.user_id,
                pay: 
            };
            console.log(newPayment);

        }

        render() {

            const { users } = this.props.users;
            return (
                <div className='container dashboard'>
                    <form onSubmit={this.handleSubmit}>
                        <h2>Nová platba</h2>
                        <div className="form-group">
                            <label htmlFor="user_id">User</label>
                            <select className="form-control" id="user_id" onChange={this.handleChange}>
                                <option>Select an option</option>

                                { users.map(user => {
                                    return (
                                        (user.pay>0) ? <option key={user.id} value={""+user.id+""
                                        }>{user.name + ' ' + user.lastname}</option> : ''



                                    )
                                })}
                            </select>
                        </div>
                        <div className="form-group">
                            <label htmlFor="pay">Pay</label>
                            <input type="text" className="form-control"
                                  disabled value=''
                                />
                        </div>
                        <button type="submit" className="btn btn-primary">Add</button>
                    </form>
                </div>
            )
        }

    }

    NewPayment.propTypes = {
        getAllUsers: PropTypes.func.isRequired,
        users: PropTypes.object.isRequired
    };


    const mapStateToProps = state => {
        return {
            users: state.user

        }
    }

    export default connect(mapStateToProps, { getAllUsers, getUserById })(NewPayment);