Question

我正在尝试访问像这样的对象的属性：

export const ListingDef = {
  assistant: {
      title: 'a'
  },
  contract: {
      title: 'b'
  },
  child: {
      title: 'c'
  }}

我正在使用上下文，并且在我的状态下有一个'listingType'属性（空字符串），并且在useEffect挂钩中定义了它的值：

const Listing = ({type}) => {

  const {listingType, setListingType} = useContext(ListingContext);
  useEffect(() => {
      setListingType(type);
  }, [])

  return (
    <>
        <h1 className="listing-title">{ListingDef[listingType].title}</h1>
        <ListingTable/>
    </>
)}

这样，我可以访问ListingDef[listingType].title。但是我面临着这个问题：

Cannot read property 'title' of undefined

在第一次渲染时，listingType等于空字符串，因此我想我为什么会收到此错误。

在其他组件中，我还将基于listingType值访问对象的其他属性。

如果我处理布尔条件，它可以工作，但是无论如何，每次我想访问对象时都可以避免if(listingType)...。

（如果我直接在道具中使用type，但我需要在其他组件中使用此值，效果很好

谢谢：）

我的上下文文件：

const initialState = {
listingType: '',
listingData: [],
loading: true
}

export const ListingContext = createContext(initialState);

export const ListingProvider = ({children}) => {
const [state, dispatch] = useReducer(ListingReducer, initialState);

const setListingType = (type) => {
     dispatch({
        type: SET_LISTING_TYPE,
        payload: type
    })
}

const getListingData = async (listingType) => {
    try {
        const data = await listObjects(listingType);
        dispatch({
            type: GET_LISTING_DATA,
            payload: data
        })
    } catch (err) {

    }
}

const contextValue = {
    setListingType,
    getListingData,
    listingType: state.listingType,
    listingData: state.listingData,
    loading: state.loading
}

return (
    <ListingContext.Provider value={contextValue}>
        {children}
    </ListingContext.Provider>
)
}

Answer 1

我对redux还是比较陌生，但是当prop类型已经在工作时，我看不到使用useEffect的意义。使用默认值或将'type'属性添加到useEffect第二个参数中。

React-访问在useEffect挂钩中结算的对象属性

1 个答案: