如何使用 redux 将嵌套对象正确绑定到文本输入中

Question

我有一个 Entities 类的对象，它使用 id 作为其键将自身添加到实体缩减器中。在另一个类 Properties 中，我需要使用实体对象的每个属性来创建文本输入。我遇到的问题是，当我更新输入文本框时，它会采用我键入的第一个键并将其设为值，但它每次都会重写完整值，因此我总是得到一个字符值。我有一个类实体：import React from 'react';import { connect } from 'react-redux';import { updateSelected, addEntity } from '../actions';class Entity extends React.PureComponent {  constructor(props) {    super(props);    this.identityContainer = {      id: "abcdef",      type: "person",      properties: {        name: {          label: "Name",           type: "string",           value: "",           optional: true        },        favorite_icecream: {          label: "Favorite Ice Cream",           type: "string",           value: "",           optional: true        }      }    }    this.props.addEntity(this.identityContainer);  }  handleSelected() {    this.props.updateSelected(this.identityContainer.id)  }  render() {    return (        <div onMouseUp={() => this.handleSelected()}></div>    );  }}const mapStateToProps = (state) => {  return {    selectedEntity: state.selectedEntity  }}const mapDispatchToProps = () => {  return {    updateSelected,    addEntity  }}export default connect(mapStateToProps, mapDispatchToProps())(Entity);在文本框中输入内容后，我从 action.payload 记录以下内容：updateProperty: Object { id: "abcdef", property: "name", value: "a" }updateProperty: Object { id: "abcdef", property: "name", value: "s" }updateProperty: Object { id: "abcdef", property: "name", value: "d" }updateProperty: Object { id: "abcdef", property: "name", value: "f" }如果有人可以帮助我理解我做错了什么，我将非常感激。我一直在尝试通过多种不同的方式解决这个问题，包括使用属性数组和实体数组而不是对象。我尝试过的一切都没有任何改变。编辑：我在这里创建了一个codesandbox： https ://codesandbox.io/s/gracious-leakey-vzio6

Answer 1

尝试在每次更改时发送实际的输入值，如下所示：

<input 

  type="text" 

  id={this.props.selectedEntity} 

  name={name}

  value={property.value}

  onChange={e => this.handleUpdateEntity(this.selectedEntity.id, name, e.target.value)}

 />

更改的行是这一行：

onChange={e => this.handleUpdateEntity(this.selectedEntity.id, name, e.target.value)

Answer 2

因此，经过几天的返工，我发现问题在于正确更改嵌套对象的值。properties在我的代码中，我尝试通过使用计算属性名称访问嵌套对象来更改嵌套对象的值，例如

state[action.payload.id].properties[action.payload.property] = action.payload.value

但是我发现这不会更新状态；或者如果确实如此，它会以不会触发重新渲染的方式进行操作。在许多其他问题中，我看到必须使用扩展变量来返回一个全新的对象，然后触发重新渲染。以这段代码为例：

case ENTITY_UPDATED:

    const {id, name, value} = action.payload;

    return {

        ...state,

        [id]: {

            ...state[id],

            properties: {

                ...state[id].properties,

                [name]: {

                    ...state[id].properties[name],

                    value: value

                }

            }

        }

    }

这是 redux 需要更改状态来注册更改的方式。我不是 100% 确定为什么会出现这种情况，但确实如此。如果有人对此有充分的把握，请联系并发表评论！