React Native如何将OrderSummary页订单总价传递到OrderProgress页展示

你遇到的{total}变量找不到报错，是三个地方有遗漏，按以下顺序修改即可：

1. 补全pedidosReducer.js的总价更新逻辑 #

你用了Context+Reducer做全局状态管理，但没有在Reducer中处理MOSTRAR_RESUMEN类型的动作，导致总价没法同步存入全局状态。找到你的pedidosReducer.js文件，新增对应case：

// pedidosReducer.js
import { 
  SELECCIONAR_PRODUCTO,
  CONFIRMAR_ORDENAR_PLATO,
  MOSTRAR_RESUMEN,
  ELIMINAR_PRODUCTO,
  PEDIDO_ORDENADO
} from '../../types'

export default (state, action) => {
  switch(action.type) {
    // 原有其他case保留，新增以下逻辑
    case MOSTRAR_RESUMEN:
      return {
        ...state,
        total: action.payload
      }
    // 原有其他case不要删除
    default:
      return state
  }
}

2. 修正stateOrders.js的语法错误 #

你贴出的stateOrders.js代码存在注释和代码拼接的语法问题，调整初始状态声明部分：

// stateOrders.js 修正后代码
const PedidosState = props => {
  // Create initial state  
  const initialState = {
    pedido: [],
    plato: null,
    total: 0,
    idpedido: ''
  }
  // useReducer with dispatch to execute functions  
  const [state, dispatch] = useReducer(PedidoReducer, initialState)
  // 后续原有逻辑保持不变
}

3. 调整OrderProgress.js的总价取值逻辑（可选，更稳定） #

如果用户刷新App，全局状态的total会被清空，推荐直接从Firebase存储的订单数据中拉取总价，避免依赖全局状态的时效问题：

// OrderProgress.js 修改部分代码
const ProgresoPedido = () => {
  const navigation = useNavigation()
  const { idpedido } = useContext(PedidoContext) // 删掉原有的total取值，从Firebase拿更可靠

  const [tiempo, guardarTiempo] = useState(0)
  const [completado, guardarCompletado] = useState(false)
  const [total, guardarTotal] = useState(0) // 新增本地state存订单总价

 useEffect(() => {
    const obtenerProducto = () => {
      firebase.db.collection('ordenes')
        .doc(idpedido)
        .onSnapshot(function(doc) {
          const orderData = doc.data()
          guardarTiempo(orderData.tiempoentrega)
          guardarCompletado(orderData.completado)
          guardarTotal(orderData.total) // 同步拉取订单总价
        })
    }
    obtenerProducto()
  }, [])

  // 剩余原有逻辑保持不变
}

改完以上三处即可正常在取餐通知中展示订单总价，不会再出现变量找不到的报错。

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