Ionic React更新Capacitor Storage值时find方法报错如何解决

错误原因 #

• Capacitor Storage 的读写都是基于字符串格式，你通过Storage.get()获取到的value是JSON序列化后的字符串，不是数组对象，因此没有find方法，直接调用就会抛出类型错误。
• React 中setState是异步执行的，执行完setState后立刻读取this.state.park，拿到的大概率是更新前的旧值，会导致存储的park字段值不正确。
• Storage.set是异步方法，未加await的话可能会出现写入逻辑未执行完成的异常情况。

修复后的代码 #

class Park extends React.Component {
    constructor(props) {
      super(props);
      this.state = {park: ""};
  
      this.handleChange = this.handleChange.bind(this);
    }
  
    async handleChange(e) {
      const selectedPark = e.target.value;
      // 更新组件状态
      this.setState({
        park: selectedPark
      });
      
      // 读取存储内容，反序列化为数组，空值兜底为空白数组
      const {value} = await Storage.get({key: 'test' });
      const photoList = value ? JSON.parse(value) : [];
      
      // 匹配对应filepath的照片条目
      const targetItem = photoList.find(x => x.filepath == this.props.photoPath);
      if (targetItem) {
        // 直接使用当前选中的park值，不依赖异步更新的state
        targetItem.park = selectedPark;
      }

      // 数组序列化为字符串后再存入存储，加await保证写入完成
      await Storage.set({key: 'test', value: JSON.stringify(photoList)})
    }
  
    render() {
      return (
          <IonItem>
              <IonLabel position="stacked">Parks</IonLabel>
              <IonSelect name="park" value={this.state.park} placeholder="Choose park" onIonChange={this.handleChange}>
                  <IonSelectOption value="park1">Park1</IonSelectOption>
                  <IonSelectOption value="park2">Park2</IonSelectOption>
                  <IonSelectOption value="park3">Park3</IonSelectOption>
              </IonSelect>
          </IonItem>
      );
    }
  }

export default Park

可选TypeScript类型优化 #

如果是TypeScript项目，可以提前定义数组项的类型，避免后续类型报错：

interface PhotoItem {
  filepath: string;
  latitude: number;
  longitude: number;
  time: string;
  park: string;
}
// 解析时指定类型
const photoList: PhotoItem[] = value ? JSON.parse(value) : [];

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