Question

首先让我说我是React中的菜鸟。

我在componentDidMount中获取数据准备/设置我的状态。我有一个远程API端点，它会吐出JSON数据，看起来像这样。

  "popup": {
    "background": "bg",
    "url": "",
    "title": {
      "text": "title",
      "color": "#222",
      "bgColor": "#fff"
    },
    "button": {
      "text": "button",
      "color": "#222",
      "bgColor": "#567834"
    },
    "termsAndConditions": {
      "text": "termsAndConditions",
      "color": "#222",
      "bgColor": "#fff"
    }
  }

并基于这些数据，我正在呈现一个无状态组件，我将道具传递给。

这是我的初始状态

this.state = {
  popup: {
    background: "",
    button: {
      color: "",
      bgColor: "",
      buttonRounded: false,
      text: "",
    },
    termsAndConditions: "",
    title: {
      bgColor: "",
      color: "",
      text: ""
    }
  }
}

现在是时候更新＆＃39; title＆＃39;部分来自表格。所以我正在设置这样的状态

   handlePopupTitle(e) {
    this.setState({
      popup: {
        title: {
          text: e.target.value.trim()
        }
      }
    })
   }

然而，很快我意识到React将覆盖我当前的状态而只留下

popup: {
  title: {
   text: "whatever my input value is"
  }
}

所以，我使用Object.assign来创建一个新对象并使用它来设置状态，因为改变你的状态显然是一个很大的NO。

现在我的事件处理程序看起来像这样

handlePopupTitle(e) {

  const newState = Object.assign( {}, this.state.popup, {
    title: {
      text: e.target.value
    }
  })

  this.setState({
    popup: newState
  })

}

但现在问题是我只是在更新文字＆＃39;键入标题＆＃39;对象和所有其他键，例如＆＃39; color＆＃39;，＆＃39; bgColor＆＃39;会丢失，因为我只设置＆＃39; text＆＃39;。

我尝试将Object.assign放在另一个Object.assign中，但它对我来说似乎不是一个理想的解决方案。还有一点要注意，我无法更改状态的嵌套结构，因为我的数据结构不会发生。

由于

Answer 1

更简单，更容易的解决方案是使用immutability-helper npm包。

import update from 'immutability-helper';

.....


var newState = update(state, {
  popup: {
    title: {
      text: {
        $set: e.target.value;
      }
    }
  }
})

查看 this doc 了解更多信息

使用Object.assign设置状态会丢失状态中的键

1 个答案: