React Native Expo中AsyncStorage跨页面传值失败求助

核心问题定位 #

你的代码存在几个关键错误，导致数据传递失败且无报错提示：

• ToyDetails页面未将目标数据赋值给存储变量：你声明了savedName状态，但从未把FlatList传入的name赋值给它，调用AsyncStorage.setItem时存入的是空字符串，自然无法在Cart页面获取有效数据。
• Text组件误用属性：Text组件不支持value和onChangeText属性，你混淆了Text与TextInput的API规范。
• 异步处理不规范：getData函数中try/catch无法捕获.then链内的错误，排查问题时难以定位异常。

修正后的代码 #

ToyDetails页面

const ToyDetails = ({ name }) => { // 确保name通过props正确传入
  const [buttonText, setButtonText] = useState('ADD TO CART')

  const addCart = async() => {
    setButtonText('ADDED TO CART!')
    try {
      // 直接存储传入的name，无需额外状态（无需编辑场景下）
      await AsyncStorage.setItem('saved_name', name)
      console.log('数据存入成功') // 日志确认存储状态
    } catch(error) {
      console.log('存入失败:', error)
    }
  }

  return(
    <View>
      <Text>{name}</Text>
      <Button title={buttonText} onPress={addCart} /> {/* 补充触发存储的按钮 */}
    </View>
  )
}

Cart页面

const Cart = () => {
  const [savedName, setSavedName] = useState('')

  useEffect(() => {
    getData()
  }, [])

  // 改用async/await统一处理异步逻辑
  const getData = async () => {
    try {
      const value = await AsyncStorage.getItem('saved_name')
      if (value != null) {
        setSavedName(value)
        console.log('获取到的数据:', value) // 日志确认获取结果
      } else {
        console.log('无存储数据')
      }
    } catch(error) {
      console.log('获取失败:', error)
    }
  }

  return (
    <View>
      <Text>已保存的名称：{savedName}</Text>
    </View>
  )
}

额外排查建议 #

1. 确认name是否正确传入ToyDetails组件，可在组件内添加console.log(name)验证。
2. 若需存储多个商品，建议用数组形式存储，示例：

// 存储多个商品
const addCart = async() => {
  try {
    const existingToys = await AsyncStorage.getItem('saved_toys')
    const toysArray = existingToys ? JSON.parse(existingToys) : []
    toysArray.push(name)
    await AsyncStorage.setItem('saved_toys', JSON.stringify(toysArray))
  } catch(error) {
    console.log(error)
  }
}

// 获取多个商品
const getData = async () => {
  try {
    const value = await AsyncStorage.getItem('saved_toys')
    if (value != null) {
      const toysArray = JSON.parse(value)
      setSavedToys(toysArray)
    }
  } catch(error) {
    console.log(error)
  }
}

3. 用以下代码查看所有存储的键值对，确认数据是否真的存入：

const checkStorage = async () => {
  const keys = await AsyncStorage.getAllKeys()
  const result = await AsyncStorage.multiGet(keys)
  console.log('所有存储数据:', result)
}

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