亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

如何使用 redux 將嵌套對象正確綁定到文本輸入中

如何使用 redux 將嵌套對象正確綁定到文本輸入中

12345678_0001 2023-11-11 21:02:12
我有一個 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
查看完整描述

2 回答

?
UYOU

TA貢獻1878條經驗 獲得超4個贊

嘗試在每次更改時發送實際的輸入值,如下所示:


<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)


查看完整回答
反對 回復 2023-11-11
?
慕妹3146593

TA貢獻1820條經驗 獲得超9個贊

因此,經過幾天的返工,我發現問題在于正確更改嵌套對象的值。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% 確定為什么會出現這種情況,但確實如此。如果有人對此有充分的把握,請聯系并發表評論!


查看完整回答
反對 回復 2023-11-11
  • 2 回答
  • 0 關注
  • 154 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號