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

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"
    }
  }

并基于这些数据，我正在渲染一个无状态组件，我正在将 props 传递给它。

这就是我的初始状态

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

现在是时候从表单中更新“标题”部分的值了。所以我设置它的状态是这样的

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

但是，很快我就意识到 React 将覆盖我当前的状态并只离开

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

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

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

handlePopupTitle(e) {

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

  this.setState({
    popup: newState
  })

}

但现在的问题是我只更新 'title' 对象中的 'text' 键，而所有其他键如 'color'、'bgColor' 都丢失了，因为我只设置了 'text'。

我尝试将 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了解更多信息