无法从 react-redux 访问 object

Question

我已经从 reducer 中获取数据并将其显示在控制台中

但是当我想访问特定的 object 例如 (table.nomor) 并且它变成错误

这是我的减速器：

export const orderListDetailReducer = (state = { orders: {} }, action) => {
switch (action.type) {
    case ORDER_TABLE:
        return {
            orders: action.payload
        }
    default:
        return state;
}
}

这是我的屏幕：

import React, { useEffect } from 'react'
import { useDispatch, useSelector } from 'react-redux'
import { listOrderDetail } from '../actions/orderAction'


const PlaceOrderScreen = (props) => {
const orderId = props.match.params.id
const orderListDetail = useSelector(state => state.orderListDetail)
const { orders } = orderListDetail

const dispatch = useDispatch()

useEffect(() => {
    dispatch(listOrderDetail(orderId))
}, [dispatch, orderId])

console.log(orders.table.nomor);

Answer 1

这是 react-redux 存储上异步行为的常见问题，您需要了解 useSelector 异步工作并检查具有完整值的变量，您需要使用 useEffec，检查以下示例：

***尝试代码并告诉我进展如何:)

import React, { useEffect } from 'react'
import { useDispatch, useSelector } from 'react-redux'
import { listOrderDetail } from '../actions/orderAction'


const PlaceOrderScreen = (props) => {
const orderId = props.match.params.id
const orders = useSelector(state => state.orderListDetail.orders)//-->changed this line -->added one level
//const { orders } = orderListDetail //-->commented this line

const dispatch = useDispatch()

useEffect(() => {
    dispatch(listOrderDetail(orderId))
}, [dispatch, orderId])


//-->create new useEffect and add the dependency from useSelector constant
useEffect(() => {
    console.log('orders',orders);
    console.log('nomor',orders.table.nomor);
}, [orders]);

Answer 2

问题：初始状态未定义

您的组件的第一次呈现发生在分派的操作完成其商店更新之前。这意味着 state 在你第一次渲染时的值是初始值（除非你已经从其他组件更新了状态）。

你的初始状态是state = { orders: {} }所以orders的初始值是一个空对象{}。您可以在空对象上访问 orders.table，但是 orders.table 的值是 undefined。您 不能 访问 orders.table.nomor 因为那会试图从 orders.table 获取 属性 nomor 即 undefined - - 所以你得到错误 “无法读取未定义的 属性 'nomor'”。

您需要确保您的组件在生命周期的任何时候都能正确呈现，无论 ORDER_TABLE 操作是否已完成。

解决方案 1：受保护的访问

您可以在访问 .nomor 属性.

之前确保 orders.table 不是 undefined

const nomor = orders.table ? orders.table.nomor : someDefaultValue;

或更简洁地使用 optional chaining。

const nomor = orders.table?.nomor; // will be undefined if not able to access

方案二：初始值

你可以为你的 reducer 设置一个更深的初始值对象，它允许你访问 orders.table.nomor。这可能有意义也可能没有意义，具体取决于您应用的数据结构。

如果orders.table是一个空对象{}而不是undefined，那么就可以访问orders.table.nomor。本例中 orders.table.nomor 的值为 undefined.

const initialState = {
  orders: {
     table: {}
  }
}

您还可以更深入地设置 nomor 的初始值。

const initialState = {
  orders: {
     table: {
       nomor: someInitialValue
     }
  }
}

无论哪种方式，您都可以将其用作减速器的初始值。

export const orderListDetailReducer = (state = initialState, action) => {