将对象添加到 useState() 并在 React Native 中显示数据

Question

我有以下功能：

const [dataLoc, setDataLoc] = useState({date: "No data received yet from sensor", coords: {}});

我在这里设置位置：

Geolocation.getCurrentPosition(
      location => {
        const date = dateToString(location.timestamp);
        const coords = location.coords
        setDataLoc({date, coords})
      }
)

使用坐标界面：

export interface GeoCoordinates {
    latitude: number;
    longitude: number;
    accuracy: number;
    altitude: number | null;
    heading: number | null;
    speed: number | null;
    altitudeAccuracy?: number | null;
}

来自：

import Geolocation from 'react-native-geolocation-service';

我想像这样渲染数据：

<Text style={styles.data}>{dataLoc.coords.latitude}</Text>

但是我收到：

error: SyntaxError: .../App.tsx: Unexpected token

我无法接收对象的任何属性，因为该对象是空的 { } 就像我在 useState() 中所说的那样。

当我尝试在 useState() 中定义对象时，出现错误，因为例如 altitude 可以是 number 或 null.

我的问题是如何在不定义 dataLoc 的情况下将坐标添加到 dataLoc 中，并且仍然检索对象元素或定义某些值可以是数字或 null？

我还尝试在 useState() 中将其定义为：

const [dataLoc, setDataLoc] = useState({
date: "No data received yet from sensor", 
coords: { 
  latitude: 0,
  longitude: 0,
  altitude: 0,
  accuracy: 0,
  altitudeAccuracy: 0,
  heading: 0,
  speed: 0
}
});

但随后我收到：

Type '{ latitude: number; longitude: number; altitude: number 
| null; accuracy: number; altitudeAccuracy: number | null; 
heading: number | null; speed: number | null; }' is not 
assignable to type '{ latitude: number; longitude: number; 
altitude: number; accuracy: number; altitudeAccuracy: number; 
heading: number; speed: number; }'.
Types of property 'altitude' are incompatible.
Type 'number | null' is not assignable to type 'number'.
Type 'null' is not assignable to type 'number'.

Answer 1

const [dataLoc, setDataLoc] = useState<{
  date: string;
  coords: GeoCoordinates;
}>({
  date: '', 
  coords: {} as GeoCoordinates,
});
/*
 * Your another codes
 */

//calling it everwhere you want (e.g in useEffect)
const _setLocation = () => {
  //checking location permission then
  Geolocation.getCurrentPosition(
    ({timestamp, coords}) => {
      const date = dateToString(timestamp);
      setDataLoc({date, coords});
    },
    e => console.log(e),
  );
};
/*
 * Your another codes
 */
return (
  <Text style={styles.data}>
    {dataLoc.coords?.latitude}
  </Text>
);

Answer 2

您需要明确状态值的类型，因为它无法从初始值推断出来。

例如，如果您的状态值是 number 类型注释，则不需要。

const [value, setValue] = useState(0); // TypeScript infers the number type

setValue(53); // Ok
setValue('some string'); // Error

但假设您的值可以是数字或字符串。 TS 不可能从 init 值推断出这一点，因为一个值不能同时是字符串和数字。因此，我们将类型传递给这个 generic useState 函数。

const [num, setNum] = useState(0); // TypeScript infers the number type
const [value, setValue] = useState<string | number>(0); // We explicitly pass string | number

setNum('some string'); // Error
setValue('some string'); // Ok

现在回到您的具体示例，当您像这样初始化状态时。

const [dataLoc, setDataLoc] = useState({
  date: "No data received yet from sensor", 
  coords: { 
    latitude: 0,
    longitude: 0,
    altitude: 0,
    accuracy: 0,
    altitudeAccuracy: 0,
    heading: 0,
    speed: 0
  }
});

如错误所示，这是 TS 从中推断出的类型，

{
  date: string;
  coords: { 
    latitude: number;
    longitude: number;
    altitude: number;
    accuracy: number;
    altitudeAccuracy: number;
    heading: number;
    speed: number;
  };
}

但这并不代表现实，因此您需要定义该类型或从库中获取它并将其传递给 useState。

interface DataLoc {
  date: string,
  coords: { 
    latitude: number;
    longitude: number;
    accuracy: number;
    altitude: number | null;
    heading: number | null;
    speed: number | null;
    altitudeAccuracy?: number | null;
  };
}

const [dataLoc, setDataLoc] = useState<DataLoc>({
  date: "No data received yet from sensor", 
  coords: { 
    latitude: 0,
    longitude: 0,
    altitude: 0,
    accuracy: 0,
    altitudeAccuracy: 0,
    heading: 0,
    speed: 0
  }
});

这应该可以解决该错误。我建议从库中获取正确的类型，而不是像我在代码片段中那样复制它。