在 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

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

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

Input value referencing nested child object in redux state not updating

javascript

reducers

reactjs

redux

react-redux