React Native Expo MapView 如何为MarkerInfo设置初始提示值？

问题原因 #

• 你单独声明的state对象是React类组件的状态写法，函数组件中useState钩子不会读取该对象的内容，你设置的初始提示文案没有实际生效
• 你给useState设置的初始值为空数组[]，但点击Marker后传入的是对象类型，类型不匹配导致初始状态下弹窗读取不到对应字段，所以显示为空
• componentDidMount是类组件的生命周期方法，函数组件中无法直接使用，所以这个尝试也不会生效

修改方案 #

直接把你需要的初始提示对象作为参数传入useState即可，同时要保证初始对象的字段和后续Marker传入的字段对齐，避免渲染时读取undefined报错，修改后的代码如下：

// 直接将初始默认值传入useState，删除之前没用的独立state对象
const [MarkerInfo, setMarkerInfo] = useState({
  PreviewTitle: "Select A Marker.",
  Description: "Press on a marker to get location information",
  // 其他后续会用到的字段提前设置初始占位值，避免渲染报错
  ImageUrl: "",
  Latitude: null,
  Location: "",
  Longitude: null,
  Title: "",
  id: null,
  key: ""
});

const pressMarker = (i) => {
  setMarkerInfo(i);
  console.log(i);
  // 原代码里的return MarkerInfo可以删除，setState是异步操作，此处返回的是旧值，没有实际作用
};

补充说明 #

如果你的弹窗渲染逻辑里有判断MarkerInfo是否存在的逻辑，比如只有MarkerInfo有值才渲染内容，需要注意不要用if (Array.isArray(MarkerInfo))这类数组判断，现在MarkerInfo全程都是对象类型，调整对应判断逻辑即可。

内容的提问来源于stack exchange，提问作者RickPeck