如何不使用Redux或本地存储实现React函数组件间状态共享

核心思路是把需要共享的状态和逻辑上移到共同的父组件，子组件通过回调函数将数据传递给父组件，由父组件统一管理列表。具体修改如下：

1. 调整父组件 showLuckyNumber #

• 初始化 listLuckyNumber 为空数组（避免初始值为 undefined 引发的问题）
• 定义处理新生成数字的函数，将新数字追加到列表中
• 给每个 GenerateLuckyNumber 子组件传递回调函数

2. 修改子组件 GenerateLuckyNumber #

• 接收父组件传递的回调函数作为props
• 生成新数字时，调用回调函数将数字传递给父组件

完整代码示例 #

import React from 'react';
import { Text, TouchableOpacity, View } from 'react-native';
import { useState } from 'react';

export const GenerateLuckyNumber = ({ onNumberGenerated }) => {
  const [luckNo, setluckNo] = useState(1);
  
  const changeCatName = () => {
    const newLuckyNumber = Math.floor(Math.random() * 100);
    setluckNo(newLuckyNumber);
    // 将新生成的数字传递给父组件
    onNumberGenerated(newLuckyNumber);
  }
  
  return (
    <TouchableOpacity onPress={changeCatName} style={{ marginVertical: 10 }}>
      <Text>Hello, Your Lucky Number is {luckNo}!</Text>
    </TouchableOpacity>
  );
}

const showLuckyNumber = () => {
  // 初始化列表为空数组
  const [listLuckyNumber, setlistLuckyNumber] = useState([]);
  
  // 处理子组件传递的新数字，添加到列表
  const handleNumberGenerated = (newNumber) => {
    setlistLuckyNumber(prevList => [...prevList, newNumber]);
  }
  
  return (
    <View style={{ padding: 20 }}>
      <GenerateLuckyNumber onNumberGenerated={handleNumberGenerated} />
      <GenerateLuckyNumber onNumberGenerated={handleNumberGenerated} />
      <GenerateLuckyNumber onNumberGenerated={handleNumberGenerated} />
      
      {/* 展示所有已生成的幸运数字 */}
      <View style={{ marginTop: 20 }}>
        <Text style={{ fontSize: 16, fontWeight: 'bold' }}>已生成的幸运数字列表：</Text>
        <Text>{listLuckyNumber.join(', ')}</Text>
      </View>
    </View>
  );
}

export default showLuckyNumber;

关键说明 #

• 状态提升：父组件 showLuckyNumber 负责管理所有生成数字的列表，子组件仅专注于生成数字并通知父组件
• 回调传递：通过props传递 onNumberGenerated 函数，子组件生成新数字时调用该函数，将数据回传给父组件
• 不可变更新：更新列表时使用展开运算符 [...prevList, newNumber]，避免直接修改原数组，符合React状态更新的不可变性要求

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