在Redux状态下引用嵌套子对象的输入值未更新

Question

我在redux上有一个函数，该函数接受一个对象，需要更新的值的路径以及该值。

我输入的值等于状态对象的值。

当listingObj在redux上更改时，我需要dom刷新。

我需要这样做来刷新dom的原因是因为我对公司具有自动填充功能，当用户选择公司时，它会相应地在redux状态下更新listingObj上的所有值。

提前致谢！

    //REDUX
     import axios from 'axios';

var initialState = {
    listingObj: null,
}

const GET_UPDATED_OBJ = 'GET_UPDATED_OBJ'

export function updateObj(obj, path, value) {
    if (!path && !value) {
        console.log('obj on mount', obj)
        return {
            type: UPDATE_LISTING_OBJ,
            payload: obj
        }
    } else {
        console.log('updated obj', obj)
        path.split(",").slice(0, -1).reduce((obj, key) => obj[key] || (obj[key] = {}), obj)[path.split(",").pop()] = value;
        return {
            type: UPDATE_LISTING_OBJ,
            payload: obj
        }
    }
}


export default function reducer(state = initialState, action) {
    switch (action.type) {
        case UPDATE_LISTING_OBJ:
            return Object.assign({}, state, { listingObj: action.payload })

        default: return state;
    }
}


    //IN REACT COMPONENT
   import React from 'react';
import { connect } from 'react-redux';
import TextField from 'material-ui/TextField';
import axios from 'axios';
import { updateObj } from '../../../ducks/reducers/main_reducer'


class PropertyEdit extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            listing_id: ''
        }
    }

    componentDidMount() {
        let user_id = localStorage.getItem('user_id');
        let listing_id = this.props.listingId
        this.setState({
            listing_id: listing_id
        })
        axios.get(`/api/listings/${listing_id}`).then((res) => {
            this.props.updateObj(res.data)
        })
     }

    handleChange = path => event => {
        this.props.updateObj(this.props.listingObj, path, event.target.value)
    };

    render() {
        return (
                <div>
<CompanyNameAutofil />
 <TextField
     id="ownerStreetAddress"
      label="Owner Street Address"
       value={(this.props.listingObj.property.ownerCompany && this.props.listingObj.property.ownerCompany.streetAddress1) ? this.props.listingObj.property.ownerCompany.streetAddress1 : null}
                                onChange={this.handleChange('property,ownerCompany,streetAddress1')}
                            />

                </div>
        )
    }
}

function mapStateToProps(state) {
    return state
}



export default connect(mapStateToProps, { updateObj })(PropertyEdit)

Answer 1

当您使用终极版更新的值， componentWillReceiveProps将在订阅了Redux存储器该部分的任何组件调用。 您可以在componentWillReceiveProps使用setState更新状态中的某些值，这些值将触发render 。 但是，如果不需要更新状态以反映更改，则也可以使用this.forceUpdate() ，即使没有更改，它也将强制DOM再次呈现。 值得注意的是，应谨慎使用forceUpdate() 。