如何使用 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&nbsp;&nbsp; type="text"&nbsp;&nbsp; id={this.props.selectedEntity}&nbsp;&nbsp; name={name}&nbsp; value={property.value}&nbsp; onChange={e => this.handleUpdateEntity(this.selectedEntity.id, name, e.target.value)}&nbsp;/>更改的行是这一行：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:&nbsp; &nbsp; const {id, name, value} = action.payload;&nbsp; &nbsp; return {&nbsp; &nbsp; &nbsp; &nbsp; ...state,&nbsp; &nbsp; &nbsp; &nbsp; [id]: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ...state[id],&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; properties: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ...state[id].properties,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; [name]: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ...state[id].properties[name],&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; value: value&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }这是 redux 需要更改状态来注册更改的方式。我不是 100% 确定为什么会出现这种情况，但确实如此。如果有人对此有充分的把握，请联系并发表评论！