ReactJS setState為空白對象不起作用

Question

我有這樣的狀態

state = {
        params: {}
    }

假設我們通過this.setState({params:{data:2}})設置參數，然后當我們想恢復到其初始狀態時，調用this.setState({params:{}}) 。 狀態已還原，但問題在於視圖仍呈現2（this.state.params.data的值）。 工作的唯一方法是調用this.setState({params:{data:''}}) 。 想象一下，如果我們有很多領域，我們不會那樣做。 有什么解決辦法嗎？

代碼和框的鏈接在這里

Answer 1

您可以通過對value屬性使用三元運算符來解決此問題。 查看工作的沙箱： https : //codesandbox.io/s/blissful-clarke-l2pif

<Input
   value={params["data"] ? params["data"] : ""}
   onChange={(e, { value }) => {
      this.buildParams("data", value);
   }}
/>

這將起作用，因為它強制語義ui標簽有條件地檢查我們狀態中的值，而不是使用諸如params.data類的靜態綁定。 如果對象中有data屬性，那么我們將使用它的值。 如果不是，則顯示一個空字符串。

輸入所使用的值始終受到控制，並且在將params恢復為{}時不會保留。 我假設您可以使用與每個輸入相對應的特定name或key交換數據。

Answer 2

調用this.setState({params:{}})會將params設置為狀態上的空對象。 要驗證您可以在回調中記錄新狀態：

this.setState({params:{}}, () => console.log(this.state)) // {params: {}}

編輯：查看更新的問題，您遇到的問題是您的狀態通過this.state.params.data連接到輸入。 在這種情況下，將狀態params設置為空對象時，input的值將設置為undefined並且會收到警告： A component is changing a controlled input of type text to be uncontrolled.

在這種情況下，您的默認狀態必須如下所示：

this.state = {
  params: {data: ''}
}

和重置方法：

revertState = () => {
    this.setState({
      params: {data: ''}
    });
  };

另外，您可以通過刪除value屬性來使輸入不受控制，但是在這種情況下，您將無法直接對其進行修改。