将对象添加到数组 JS答案

【问题标题】：Add Object to Array JS将对象添加到数组 JS
【发布时间】：2017-08-17 20:23:49
【问题描述】：

我无法将新对象添加到数组。为什么？

  var messagesArray = [
  {message: "Hello", style: styles.nikkiMes},
  {message: "Okkkk", style: styles.userMes}
];

this.state = {
  messagesSource: ds.cloneWithRows(messagesArray.slice()),
  inputMes: ''
};

添加：

this.state.messagesArray.push({
  message: this.inputMes,
  style: styles.userMes
});

this.setState({
  messagesSource: ds.cloneWithRows(this.state.messagesArray.slice())
});

我得到的错误：undefined is not object (evalating 'this.state.messagesArray.push')

【问题讨论】：

this 的context 是什么？
如果你在调用this.state.messagesArray.push()之前检查this.state（例如console.log(this.state);），messagesArray是this.state的属性吗？

标签： javascript mobile react-native

【解决方案1】：

正如@Sam Onela 在上面的评论中所建议的，你在状态对象中没有 messagesArray 键或者 messagesArray 不是状态对象的属性，也 尽量避免使用 push ，这是一个变异函数，请尝试 concat 和 spread 运算符。您可以尝试以下解决方案来解决此问题

 var messagesArray = [
  {message: "Hello", style: styles.nikkiMes},
  {message: "Okkkk", style: styles.userMes}
];

this.state = {
  messagesSource: ds.cloneWithRows(messagesArray.slice()),
  inputMes: ''
};
//these lines of code will not be needed if you are using spread operator
messagesArray.concat({             //replaced push with concat, meassageArray is a global object
  message: this.inputMes,
  style: styles.userMes
});

this.setState({
  messagesSource: ds.cloneWithRows(messagesArray.slice())
  //messagesSource: ds.cloneWithRows([...messageArray, {message: this.inputMes,style: styles.userMes}])  // see how you can directly use spread operator
});

var messagesArray = [
  {message: "Hello", style: styles.nikkiMes},
  {message: "Okkkk", style: styles.userMes}
];

this.state = {
  messagesSource: ds.cloneWithRows(messagesArray.slice()),
  inputMes: '',
  messagesArray :messagesArray //I included messagesArray  within state
};


this.setState((prevState, props)=>{
 messageArray:[...prevState.messageArray, {message: this.inputMes,style: styles.userMes}]
})

this.setState({
  messagesSource: ds.cloneWithRows(this.state.messagesArray) //first solution will be most fit for your case as messageArray would not have been updated till now
});

【讨论】：

谢谢，现在不显示错误但是我的应用程序中的 ListView 没有更新...我有： sendMes(){ var ds= new ListView.DataSource({ rowHasChanged: (r1, r2 ) => r1 !== r2 }); this.setState({ messagesSource: ds.cloneWithRows(this.state.messagesArray.concat({message: this.inputMes, style: styles.userMes}).slice()) });按下按钮时调用此函数...我需要该代码工作吗？ :) 抱歉评论格式不正确
我建议您使用第一种解决方案，不要将 messgeArray 保留在状态中（将其作为组件中的全局变量保留），在使用 concat 或 push 设置数据源状态之前添加更新，然后做 setState 的事情

【解决方案2】：

你有一个简单的错字。您已将数组设置为 state.messagesSource 并尝试添加到不存在的 state.messagesArray 中。有一个 messagesArray 变量，但在状态上没有可用的变量。

【讨论】：