react没有在类中使用state来更新组件

Question

首先我要给state组件赋空值然后再赋值这是我的类的构造函数

constructor(props){
super(props);
this.state = {
Countrys:null,
States:null,
Citys:null
}
}

,然后我给他们值ComponentDidUpdate函数这是我componentDidMount

componentDidMount() {
navigator.geolocation.getCurrentPosition(function(position) {
console.log(position)
console.log("Latitude is :", position.coords.latitude);
console.log("Longitude is :", position.coords.longitude);
});
this.setState({
Countrys:Country.getAllCountries(),
States:State.getAllStates(),
Citys:City.getAllCities()
})

/*console.log("Country:: "+Country.getAllCountries()[0].name);
console.log("City:: "+City.getAllCities()[0].name);*/
}

然后我试图访问jsx元素返回使用这样的map

{this.state.Citys.map((ele ,index) =>
<option value={`${ele}`} className="d-inline mx-2 col-sm-5" onClick={({target}) => target.classList.toggle('bg-primary')}>
{ele.name}
</option>
)}

但是显示错误

TypeError: Cannot read properties of null (reading 'map')

谁能告诉我这里有什么问题或如何纠正它当我试图将City.getAllCities()函数直接分配给这个时。状态，而不是赋值为null，它会显示页面无响应

和City.getAllCities()、country . getallnations()、State.getAllStates()来自npm package "country-state-city">

Answer 1

如果，如您所提到的，您正在使用country-state-city，那么根本没有理由将这三个值延迟加载到componentDidMount:它们是从country-state-city包中静态导入的。

只要在你的文件顶部导入它们，在你的构造函数中创建你的初始状态，分配这些值，你就完成了在渲染过程中没有任何null状态。

import { Component } from "react";
import { Country, State, City }  from "country-state-city";
...
export class YourClass extends Component {
constructor(props) {
super(props);
this.state = {
countries: Country.getAllCountries(),
states: State.getAllStates(),
cities: City.getAllCities()
};
}
render() { ... }
}

Answer 2

第一个渲染将有状态。city被设置为null，正如您在构造函数中设置的那样。

ComponentDidMount只会在第一次渲染后触发。

应该在构造函数

中初始化状态

Answer 3

正如Bernardo Ferreira Bastos Braga所提到的，state.Citys在第一次渲染中是空的。
你可以做一件事来避免错误是有条件地呈现。

{this.state.Citys !== null && this.state.Citys.map((ele ,index) =>
<option value={`${ele}`} className="d-inline mx-2 col-sm-5" onClick={({target}) => target.classList.toggle('bg-primary')}>
{ele.name}
</option>
)}

或

{this.state.Citys === null ? <SomeOtherComponent/Element/EmptyFragment/etc.. /> : this.state.Citys.map((ele ,index) =>
<option value={`${ele}`} className="d-inline mx-2 col-sm-5" onClick={({target}) => target.classList.toggle('bg-primary')}>
{ele.name}
</option>
)}

在这些例子中,map函数不会被称为如果state.Citys是null。