javascript - Redux 状态在一个组件的 TextField 中更新，但在另一个具有相同 TextField 的组件中没有更新

Question

我正在使用带有反应的redux。我有两个单独的 js 文件，它们都被导入到 index.js Js 文件 #1 有两个 TextField；TextField #1 有一个公司列表，TextField #2 有一个与从 TextField #1 中选择的公司关联的联系人列表。Js 文件 #2 仅包含 TextField #2 的副本我在这里遇到的问题是，当我从 TextField #1 中选择一家公司时，js 文件 #1 中的 TextField #2 会更新，但 js 文件中的 TextField #2 不会更新 # 2. 状态存储在 redux 存储中，而不是本地存储。这是 js 文件 #1：

import React, { Component } from 'react';
import { connect } from 'react-redux';
import * as CompanyAction from '../../../../../actions/CompanyAction';
import Input from '@material-ui/core/Input';
import InputLabel from '@material-ui/core/InputLabel';
import MenuItem from '@material-ui/core/MenuItem';
import Select from '@material-ui/core/Select';
import TextField from '@material-ui/core/TextField';
import axios from 'axios';
class Component1 extends Component {
    constructor(props) {
        super(props);
        this.handleCompanyNameChange = this.handleCompanyNameChange.bind(this);
    }
    handleCompanyNameChange = e => {
        axios.get('/api/get/getCompany', {
            params: { id: e.target.value }
        }).then(({ data }) => {
            this.props.companyReducer.contacts = data.contacts;
            this.forceUpdate();
        });
    }
    componentDidMount = () => {
        axios.get('/api/get/companies').then(({ data }) => {
            data.sort((a, b) => (a.companyName > b.companyName) ? 1 : -1)
            this.props.companyReducer.companies = data;
            this.forceUpdate();
        });
    }
    handleGlobalChange = e => {
        e.preventDefault();
        this.props[e.target.name](e.target.value);
    };
    render() {
        const {
            handleCompanyNameChange,
            handleGlobalChange,
        } = this;
        return (
            <div>
                <TextField
                    select
                    label="Select Company"
                    value={this.props.companyReducer.companyId}
                    onChange={handleCompanyNameChange}
                    SelectProps={{}}>
                    <MenuItem value="">
                        <em>None</em>
                    </MenuItem>>
                        {this.props.companyReducer.companies.map((option, idx) => (
                        <MenuItem value={option.companyId}>
                            {option.companyName}
                        </MenuItem>
                    ))}
                </TextField>
                <TextField
                    select
                    label="Select Contact"
                    name="contactIdChange"
                    value={this.props.companyReducer.contactId}
                    onChange={handleGlobalChange}
                    SelectProps={{}}>
                    <MenuItem value="">
                        <em>None</em>
                    </MenuItem>>
                        {this.props.companyReducer.contacts.map((option, idx) => (
                        <MenuItem value={option.contactId}>
                            {option.firstName}
                        </MenuItem>
                    ))}
                </TextField>
            </div>
        )
    }
}
const mapStateToProps = (state, ownProps) => {
    return {
        companyReducer: state.companyReducer
    }
};
const mapDispatchToProps = (dispatch) => {
    return {
        companyNameChange: companyName => dispatch(CompanyAction.companyNameChange(companyName)),
    }
};
export default connect(mapStateToProps, mapDispatchToProps)(Component1 );

这是 js 文件 #2：

import React from 'react';
import { connect } from 'react-redux';
import * as CompanyAction from '../../../../../actions/CompanyAction';
import TextField from '@material-ui/core/TextField';
import Input from '@material-ui/core/Input';
import InputLabel from '@material-ui/core/InputLabel';
import MenuItem from '@material-ui/core/MenuItem';
class Component2 extends React.Component {
    constructor(props) {
        super(props);
    }
    handleGlobalChange = e => {
        e.preventDefault();
        this.props[e.target.name](e.target.value);
    };
    render() {
        const {
            handleGlobalChange,
        } = this;
        return (
            <div>
                <TextField
                    select
                    label="Select Contact"
                    name="contactIdChange"
                    value={this.props.companyReducer.contactId}
                    onChange={handleGlobalChange}
                    SelectProps={{}}>
                    <MenuItem value="">
                        <em>None</em>
                    </MenuItem>>
                        {this.props.companyReducer.contacts.map((option, idx) => (
                        <MenuItem value={option.contactId}>
                            {option.firstName}
                        </MenuItem>
                    ))}
                    </TextField>
            </div>
        )
    }
}
const mapStateToProps = (state, ownProps) => {
    return {
        companyReducer: state.companyReducer
    }
};
export default connect(mapStateToProps)(Component2 );

这两个文件都被导入到一个名为 index.js 的 js 文件中。对此的任何帮助将不胜感激。

标签： javascriptreactjsreduxreact-reduxstate