用React中的setState更新對象

是否有可能用setState更新對象的屬性？用React中的setState更新對象

喜歡的東西：

this.state = { 
    jasper: { name: 'jasper', age: 28 }, 
}

我曾嘗試：

this.setState({jasper.name : 'someOtherName'});

這：

this.setState({jasper:{name:'someothername'}})

首先是語法錯誤，第二個少了點什麼。有任何想法嗎？

來源

2017-04-26 JohnSnow

有多種方法可以做到這一點。

1最簡單的一個：

首先創建的jasper副本，然後做的更改：

let jasper = Object.assign({}, this.state.jasper); //creating copy of object 
jasper.name = 'someothername';      //updating value 
this.setState({jasper});

而不是使用Object.assign的，我們也可以把它寫這樣的：

let jasper = {...this.state.jasper};

2-使用spread operator：

this.setState(prevState => ({ 
    jasper: { 
     ...prevState.jasper, 
     name: 'something' 
    } 
}))

來源

2017-04-26 15:59:45

現在我正在努力工作的方式，雖然...第二種方式：S – JohnSnow

@JohnSnow在你第二它會刪除'jasper'對象的其他屬性，做'console.log（jasper）'你只會看到一個鍵'name'，年齡不會在那裏:) –

True ...你描述的方式是唯一的去考慮它...考慮我想使用React而不是Redux？ – JohnSnow

第一種情況確實是語法錯誤。

由於我看不到組件的其餘部分，因此很難理解爲什麼在此處將對象嵌套在狀態中。將對象嵌套在組件狀態不是一個好主意。嘗試設置你的初始狀態是：

this.state = { 
    name: 'jasper', 
    age: 28 
}

這樣一來，如果你要更新的名字，你可以叫：

this.setState({ 
    name: 'Sean' 
});

將是實現你的目標是什麼呢？

對於更大，更復雜的數據存儲，我會使用像Redux這樣的東西。但是這是更先進的。

與組件的狀態一般的規則是隻使用它來管理組件的UI狀態（例如活躍，定時器等）

查閱這些引用：

來源

2017-04-26 16:06:05 mccambridge

我只用作爲一個例子，該對象必須嵌套..我可能應該使用Redux，但我想了解React fundementals .. – JohnSnow

是的，我現在會遠離Redux。在學習基礎知識時，儘量保持數據簡單。這會幫助你避免讓你感到沮喪的奇怪情況。 – mccambridge

-1

我試圖編輯主要答案，但它沒被批准。另一種選擇：定義你的變量出Jasper對象，然後調用一個變量。

傳播運營商：ES6

this.state = { jasper: { name: 'jasper', age: 28 } } 

let foo = "something that needs to be saved into state" 

this.setState(prevState => ({ 
    jasper: { 
     ...jasper.entity, 
     foo 
    } 
})

來源

2018-02-20 02:28:45

-3

這很容易只是做

this.state = { jasper: { name: 'jasper', age: 28 } } 



var jasper = this.state.jasper; 
jasper.name = <someName>

來源

2018-02-22 15:56:49

我用這個解決方案。

如果你有這樣一個嵌套的狀態：

this.state = { 
      formInputs:{ 
      friendName:{ 
       value:'', 
       isValid:false, 
       errorMsg:'' 
      }, 
      friendEmail:{ 
       value:'', 
       isValid:false, 
       errorMsg:'' 
      } 
}

你可以聲明覆制當前狀態和handleChange功能重新分配與改變的值

handleChange(el) { 
    let inputName = el.target.name; 
    let inputValue = el.target.value; 

    let statusCopy = Object.assign({}, this.state); 
    statusCopy.formInputs[inputName].value = inputValue; 

    this.setState(statusCopy); 
    }

這裏的HTML與它事件監聽器。確保使用用於進入狀態對象相同的名稱（在這種情況下，「FRIENDNAME」）

<input type="text" onChange={this.handleChange} " name="friendName" />

來源

2018-03-06 10:29:07

用React中的setState更新對象

回答

相關問題