Reactjs 使用Object.assign设置状态正在丢失状态中的密钥

让我先说我是一个反应迟钝的人

我在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: ""
    }
  }
}

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

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

handlePopupTitle(e) {

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

  this.setState({
    popup: newState
  })

}

然而，很快我就意识到React将覆盖我当前的状态，只会离开

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

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

现在，我的事件处理程序如下所示

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

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中，但对我来说这似乎不是一个理想的解决方案。还有一点需要注意的是，我不能更改我的状态的嵌套结构，因为我的数据结构不会改变

---

感谢

一个更简单、更容易的解决方案是使用

不变性助手

npm包

import update from 'immutability-helper';

.....


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

---

查看了解更多信息

一个更简单、更容易的解决方案是使用

不变性助手

npm包

import update from 'immutability-helper';

.....


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

---

查看了解更多信息

我也使用了它，但随后我在控制台中看到一个未捕获的错误，表示对象作为React子对象无效（找到：具有键{text，color，bgColor}的对象）。如果要呈现子对象集合，请改用数组，或使用React附加组件中的createFragment（object）包装对象“我不知道这意味着什么，所以我假设我做错了什么，所以我恢复了我的codeShubham，我确信这个错误与我在无状态组件中呈现状态的方式有关。如果我的状态像一个数组，这不会发生，但我没有选择。但是，你已经回答了我的问题，所以我会接受这是最好的答案。谢谢，老兄，你的意思是你的问题解决了，或者有另一个错误，还有另一个错误，但这与我所在州的结构有关。它是一个嵌套对象。因此，我得到的对象作为React子对象无效（发现：具有键{text，color，bgColor}的对象）。如果要呈现子对象的集合，请使用数组，或者使用React add onsI中的createFragment（object）包装对象。我也使用了该方法，但是我在控制台中看到一个未捕获的错误，表示对象作为React子对象无效（找到：具有键{text，color，bgColor}的对象）。如果要呈现子对象集合，请改用数组，或使用React附加组件中的createFragment（object）包装对象“我不知道这意味着什么，所以我假设我做错了什么，所以我恢复了我的codeShubham，我确信这个错误与我在无状态组件中呈现状态的方式有关。如果我的状态像一个数组，这不会发生，但我没有选择。但是，你已经回答了我的问题，所以我会接受这是最好的答案。谢谢，老兄，你的意思是你的问题解决了，或者有另一个错误，还有另一个错误，但这与我所在州的结构有关。它是一个嵌套对象。因此，我得到的对象作为React子对象无效（发现：具有键{text，color，bgColor}的对象）。如果要呈现子对象集合，请改用数组，或使用React附加组件中的createFragment（object）包装对象