页面间传递数据时如何保证持久化？

Question

我必须创建一个约会页面和另一个显示“客户”所做的所有约会的页面。

但是，我不确定如何将数据/参数从

Appointment

页面传递到

My Appointments

页面，并确保数据保留在

My Appointments

页面上。我已经使用过

route.params

之类的东西，但我很确定数据不会持续存在。

有人可以帮助我吗？

预约页面：

const AgendamentoAdv = () => {
  const [agendamentos, setAgendamentos] = useState([]);
  const [modalVisible, setModalVisible] = useState(false);
  const [idAgendamento, setIdAgendamento] = useState(null);
  const [nome, setNome] = useState('');
  const [prof, setProf] = useState('');
  const [obs, setObs] = useState('');
  const [data, setData] = useState(moment(new Date()).format('DD/MM/YYYY'));

  const navigation = useNavigation();

  useEffect(() => {
    fetchAgendamentos();
  }, []);

  const fetchAgendamentos = async () => {
    try {
      const response = await fetch(API_URL);
      const data = await response.json();
      setAgendamentos(data);
    } catch (error) {
      console.error("Erro ao buscar agendamentos:", error);
    }
  };

  const salvarAgendamento = async () => {
    const agendamento = { id: idAgendamento, nome, prof, obs, data };
    const method = idAgendamento ? 'PUT' : 'POST';
    const url = idAgendamento ? `${API_URL}/${idAgendamento}` : API_URL;

    try {
      const response = await fetch(url, {
        method,
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(agendamento),
      });

      if (!response.ok) {
        throw new Error('Erro ao salvar agendamento');
      }

      fetchAgendamentos();
      fecharModal();
    } catch (error) {
      console.error("Erro ao salvar agendamento:", error);
      Alert.alert("Erro", "Ocorreu um problema ao tentar salvar o agendamento.");
    }
  };

  const abrirFormulario = (agendamento = { id: null, nome: '', prof: '', obs: '', data: moment(new Date()).format('DD/MM/YYYY') }) => {
    setIdAgendamento(agendamento.id);
    setNome(agendamento.nome);
    setProf(agendamento.prof);
    setObs(agendamento.obs);
    setData(agendamento.data);
    setModalVisible(true);
  };

  const handleDelete = async (id) => {
    try {
      const response = await fetch(`${API_URL}/${id}`, { method: 'DELETE' });
      if (response.ok) {
        setAgendamentos(agendamentos.filter(agendamento => agendamento.id !== id));
      } else {
        throw new Error('Erro ao excluir agendamento');
      }
    } catch (error) {
      console.error("Erro ao excluir agendamento:", error);
      Alert.alert("Erro", "Ocorreu um problema ao tentar excluir o agendamento.");
    }
  };

  const fecharModal = () => {
    setIdAgendamento(null);
    setNome('');
    setProf('');
    setObs('');
    setData(moment(new Date()).format('DD/MM/YYYY'));
    setModalVisible(false);
  };

  const renderAgendamento = ({ item }) => (
  <View style={styles.card}>
    <View style={styles.info}>
      <Text style={styles.nome}>{item.nome} - {item.prof}</Text>
      <Text style={styles.obs}>Observação: {item.obs}</Text>
      <Text style={styles.data}>Data: {item.data}</Text>
      <View style={styles.actions}>
        <TouchableOpacity style={styles.actionButton} onPress={() => abrirFormulario(item)}>
          <Icon name="pencil" size={20} color="#FF7F7F" />
          <Text style={styles.actionText}>Editar</Text>
        </TouchableOpacity>
        <TouchableOpacity style={styles.actionButton} onPress={() => handleDelete(item.id)}>
          <Icon name="trash-can-outline" size={20} color="#FF7F7F" />
          <Text style={styles.actionText}>Excluir</Text>
        </TouchableOpacity>
      </View>
      <Button
            style={styles.botao}
            mode="contained"
            onPress={() => navigation.navigate('meusagendamentos', { nome: item.nome, prof: item.prof, data: item.data, obs: item.obs })}>
  Agendar
          </Button>
    </View>
  </View>
);

Answer 1

使用 redux 更好地管理状态或使用“usecontex”