第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

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

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

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

12345678_0001 2023-11-11 21:02:12
我有一個 Entities 類的對象,它使用 id 作為其鍵將自身添加到實體縮減器中。在另一個類 Properties 中,我需要使用實體對象的每個屬性來創(chuàng)建文本輸入。我遇到的問題是,當我更新輸入文本框時,它會采用我鍵入的第一個鍵并將其設為值,但它每次都會重寫完整值,因此我總是得到一個字符值。我有一個類實體: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" }如果有人可以幫助我理解我做錯了什么,我將非常感激。我一直在嘗試通過多種不同的方式解決這個問題,包括使用屬性數(shù)組和實體數(shù)組而不是對象。我嘗試過的一切都沒有任何改變。編輯:我在這里創(chuàng)建了一個codesandbox: https ://codesandbox.io/s/gracious-leakey-vzio6
查看完整描述

2 回答

?
UYOU

TA貢獻1878條經(jīng)驗 獲得超4個贊

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


<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條經(jīng)驗 獲得超9個贊

因此,經(jīng)過幾天的返工,我發(fā)現(xiàn)問題在于正確更改嵌套對象的值。properties在我的代碼中,我嘗試通過使用計算屬性名稱訪問嵌套對象來更改嵌套對象的值,例如


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

但是我發(fā)現(xiàn)這不會更新狀態(tài);或者如果確實如此,它會以不會觸發(fā)重新渲染的方式進行操作。在許多其他問題中,我看到必須使用擴展變量來返回一個全新的對象,然后觸發(fā)重新渲染。以這段代碼為例:


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 需要更改狀態(tài)來注冊更改的方式。我不是 100% 確定為什么會出現(xiàn)這種情況,但確實如此。如果有人對此有充分的把握,請聯(lián)系并發(fā)表評論!


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

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網(wǎng)微信公眾號