Reactjs typeerror:null不是对象（计算cities.push）

我正在阅读曼宁出版社的这本书，在第6章的教程中，反应在行动中 我试图创建一个应用程序，可以用于添加和显示城市，但当试图添加城市，我得到这个错误

typeerror:null不是对象（计算cities.push）

指向

App.js第42行第11列

及

AddCity.js第30行第35列

。我真的不知道该怎么解决这个问题

事实上，我正在学习Dabit Nader的react native in action教程

这是

App.js

import React，{Component}来自'React'；
进口{
平台，
样式表，
文本，
看法
异步存储
}从“反应本机”；
从“/src”导入选项卡
常量键='state'
常量初始状态=[{
城市：“巴黎”，
国家：'法国'，
id:0，
地点：[]
},
{
城市:"东京",，
国家:"日本",，
id:1，
地点：[]
}]
导出默认类应用程序扩展组件{
状态={
城市：[]
}
异步组件didmount（）{
试一试{
let cities=wait AsyncStorage.getItem（键）
cities=JSON.parse（城市）
this.setState（{cities}）
}捕获（e）{
console.log（'异步存储错误：'，e）
}
}
地址城市=（城市）=>{
const cities=this.state.cities
城市。推送（城市）
this.setState（{cities}）
AsyncStorage.setItem（key，JSON.stringify（cities））
。然后（（）=>console.log（'storage updated！'））
.catch（e=>console.log（'e:'，e））
}
addLocation=（位置，城市）=>{
const index=this.state.cities.findIndex（项=>{
return item.id==city.id
})
const chosenCity=this.state.cities[索引]
chosenCity.locations.push（位置）
康斯特城市=[
…此.state.cities.slice（0，索引），
乔森市，
…this.state.cities.slice（索引+1）
]
这是我的国家({
城市
}, () => {
AsyncStorage.setItem（key，JSON.stringify（cities））
。然后（（）=>console.log（'storage updated！'））
.catch（e=>console.log（'e:'，e））
})
}
render（）{
返回(
)
}
}

这是

AddCity.js

从“React”导入React
进口{
看法
文本，
样式表，
文本输入，
可触摸不透明度
}从“反应本机”
从“uuid/v4”导入uuidV4
从“../theme”导入{colors}
类AddCity扩展了React.Component{
状态={
城市：''，
国家：''
}
onChangeText=（键，值）=>{
this.setState（{[key]：value}）
}
提交=（）=>{
如果（this.state.city==''| | this.state.country===''）警报（'请填写表格'）
康斯特市={
城市：这个州，这个城市，
国家：这个州，
id:uuidV4（），
地点：[]
}
这个.props.screenProps.addCity（城市）
这是我的国家({
城市：''，
国家：''
}, () => {
this.props.navigation.navigate（'Cities'））
})
}
render（）{
返回(
城市
this.onChangeText（'city'，val）}
style={style.input}
值={this.state.city}
/>
this.onChangeText（'country'，val）}
style={style.input}
值={this.state.country}
/>
添加城市
)
}
}
const styles=StyleSheet.create({
按钮：{
身高：50，
背景颜色：“#666”，
为内容辩护：“中心”，
对齐项目：“居中”，
差额：10
},
按钮文字：{
颜色：'白色'，
尺寸：18
},
标题：{
颜色：'白色'，
尺寸：40，
marginBottom:10，
自我定位：“中心”
},
容器：{
背景颜色：colors.primary，
弹性：1，
为内容辩护：“中心”
},
输入：{
差额：10，
背景颜色：“白色”，
水平方向：8，
身高：50
}
})
导出默认地址城市

使用的react导航版本为2.0.1

---

数组是非基本数据类型，因此它们是按地址引用的

在你的守则中—

 addCity = (city) => {
    const cities = this.state.cities
    cities.push(city)
    this.setState({ cities })
    AsyncStorage.setItem(key, JSON.stringify(cities))
      .then(() => console.log('storage updated!'))
      .catch(e => console.log('e: ', e))
  }

你基本上是直接改变州的城市数组，你的

推送将直接改变州，改为-

 addCity = (city) => {
    this.setState({ cities: [...this.state.cities, city]})
    AsyncStorage.setItem(key, JSON.stringify(cities))
      .then(() => console.log('storage updated!'))
      .catch(e => console.log('e: ', e))
  }

其他地方也一样。希望这对你有帮助
 现在显示的错误是TypeError：传播不可编辑的内容的尝试无效instance@gbengaogunbule隐马尔可夫模型。。似乎它不是一个数组，可以u
console.log（array.isArray（this.state.cities））
并告诉它记录了什么？`let cities=wait AsyncStorage.getItem（key）cities=JSON.parse（cities）`这可能会从数组中更改它。我建议您使用proptypes来防止此类错误
 addCity = (city) => {
    const cities = this.state.cities
    cities.push(city)
    this.setState({ cities })
    AsyncStorage.setItem(key, JSON.stringify(cities))
      .then(() => console.log('storage updated!'))
      .catch(e => console.log('e: ', e))
  }

 addCity = (city) => {
    this.setState({ cities: [...this.state.cities, city]})
    AsyncStorage.setItem(key, JSON.stringify(cities))
      .then(() => console.log('storage updated!'))
      .catch(e => console.log('e: ', e))
  }