Question

我正在使用redux和react-redux。

我有一个庞大的数据列表，这些数据是用户的职业。

我有这个容器通过react-redux的连接连接到redux。

// ChangeOccupations.js
import React, { Component } from 'react';
import { connect } from 'react-redux';

import ChangeOccupation from '../../../../components/pages/admin/subs/ChangeOccupation';

import {
    occupation_update
} from '../../../../actions/edit';

class ChangeOccupations extends Component {
    render() {
        let occupations = this.props.occupations.map((occupation, i) => <ChangeOccupation occupation={occupation} original={occupation} index={i} key={i} occupationUpdate={this.props.occupationUpdate} />);

        return (
            <div>
                <p className="title">Change Your Occupations</p>

                {occupations}
            </div>
        );
    }
}

function mapStateToProps(store) {
    return {
        occupations: store.edit.occupations
    }
}

function mapDispatchToProps(dispatch) {
    return {
        occupationUpdate: payload => dispatch(occupation_update(payload))
    }
}

export default connect(mapStateToProps, mapDispatchToProps)(ChangeOccupations);

然后是一个组件。

// ChangeOccupation.js
import React, { Component } from 'react';

class ChangeOccupation extends Component {
    constructor(props) {
        super(props);

        this.changeCompany = this.changeCompany.bind(this);
        this.changeFreelance = this.changeFreelance.bind(this);
    }

    changeCompany(event) {
        let value = event.target.value;

        this.props.occupationUpdate({
            index: this.props.index,
            occupation: {
                ...this.props.occupation,
                company: value
            }
        });
    }

    changeFreelance() {
        console.log(this.props.occupation.freelance);

        if(this.props.occupation.freelance == 1) {
            return this.props.occupationUpdate({
                index: this.props.index,
                occupation: {
                    ...this.props.occupation,
                    freelance: 0
                }
            });
        }

        return this.props.occupationUpdate({
            index: this.props.index,
            occupation: {
                ...this.props.occupation,
                freelance: 1
            }
        });
    }

    render() {
        console.log(this.props.occupationUpdate);

        return (
            <form method="post" action="">
                <ul className="ul-blocked-li">
                    <li><input type="text" placeholder="Company name..." value={this.props.occupation.company? this.props.occupation.company: ''} onChange={this.changeCompany} /></li>
                    <li><input type="text" placeholder="Job title..." value={this.props.occupation.title} onChange={this.changeCompany} /></li>
                    <li>
                        <input type="hidden" value={this.props.occupation.freelance} />
                        <input id="freelance" type="checkbox" onChange={this.changeFreelance} />
                        <label htmlFor="freelance">I am a freelancer</label>
                    </li>
                </ul>
            </form>
        );
    }
}

export default ChangeOccupation;

所以容器连接到redux，它将接收所有占用数据和调度。然后，它将使用this.props.occupations.map()组件通过<ChangeOccupation />呈现所有职业数据，该组件将接收所有道具和调度，您可以在此行中看到它：

let occupations = this.props.occupations.map((occupation, i) => <ChangeOccupation occupation={occupation} original={occupation} index={i} key={i} />);

问题是当<ChangeOccupation/>组件调度一个动作时，它似乎没有更新或任何东西，但它确实到达了reducer。可能出现什么问题？

我的商店没有更新

0 个答案: