React Native Expo - 在变量赋值前设置初始值

Question

使用 React Native Expo，我有一个 MapView 屏幕，它在底部屏幕上显示标记的信息（标题、描述、图像等）。目前我有一个功能，当按下标记时，标记信息将传递给一个名为 MarkerInfo 的变量并显示在底部屏幕上。但是当组件初始化时，底部没有显示任何信息sheet。

我想显示一条消息，提示用户 select 一个标记。

这是包含 pressMarker 函数的当前代码块：

// ## Attempting to set intial values prompting users to select a marker for more info
const state = {
   MarkerInfo: {
      PreviewTitle: "Select A Marker.",
      Description: "Press on a marker to get location information"
   }
};

// ## Without the code above this all works fine:

// ## Setting the currently selected marker as variable (in an array) "MarkerInfo".
const [MarkerInfo, setMarkerInfo] = useState([]);

const pressMarker = (i) => {
   setMarkerInfo(i);
   console.log(i)
   return(MarkerInfo)
 };

这是按下标记时标记信息数组的示例。

Object {
  "Description": "Former historic palace housing huge art collection, from Roman 
   sculptures to da Vinci's 'Mona Lisa.",
  "ImageUrl": "*** My firebase storage URL",
  "Latitude": 48.86074344,
  "Location": "Paris",
  "Longitude": 2.337659481,
  "PreviewTitle": "Louvre",
  "Title": "Louvre Museum",
  "id": 64,
  "key": "63",
}

但是目前底部 sheet 在我点击标记之前什么都不显示。所以我对标记信息的初始变量定义似乎没有像我希望的那样执行。

初始声明需要更改什么？我也尝试过使用 component did mount 做一个函数并返回初始标记信息，但没有成功。

Answer 1

尝试使用

setMarkerInfo([...i]);

改为使用

setMarkerInfo(i);

Answer 2

如果您使用挂钩，则不需要使用 componentDidMount 之类的生命周期方法。当您按照 React 的建议使用钩子和功能组件时，您首先尝试初始化状态的方式似乎是错误的。

当你从数组中 select 一个项目时，你必须传递与你将在状态上拥有的对象相同的对象，作为 useState 声明中的初始值。

所以你的代码应该是

const initialState = {
  "Description": "Press on a marker to get location information",
  "ImageUrl": "",
  "Latitude": 0,
  "Location": "",
  "Longitude": 0,
  "PreviewTitle": "Select A Marker.",
  "Title": "Select A Marker.",
  "id": 0,
  "key": "",
}

const [MarkerInfo, setMarkerInfo] = useState(initialState);

ps 我假设您的 PreviewTitle 和 Description 就是您在屏幕上显示的内容

React Native Expo - 在变量赋值前设置初始值

React Native Expo - Setting an Initial Value Before Variable Assignment

javascript

state

react-native

expo

use-state