React - 访问在 useEffect 挂钩中设置的对象属性

Posted 2023-04-14

【中文标题】React - 访问在 useEffect 挂钩中设置的对象属性

【英文标题】：React - Access to an object property which is settled in useEffect hook

【发布时间】：2020-11-18 05:49:26

【问题描述】：

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

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

我正在使用 Context，我的状态中有一个“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)...。

（如果我直接从 props 中使用 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>
)

【问题讨论】：

看起来你混淆了useContext和useState；该行应该是 const listingType = useContext(ListingContext); useContext 所做的是允许组件在树的下方访问一些值；它不提供像 useState afaik 这样的二传手。

setListingType 来自我的上下文作为一个动作。我已经添加了我的上下文文件

啊，对，有道理。也许是这样：ListingDef[listingType || type].title

它有效，但我有一个 <ListingTable/> 组件，它也需要 listingType 值，我不想手动传递道具 type。在这个<ListingTable> 组件中，我还有一个用于获取数据的 useEffect 挂钩。在这个组件中，listingType 在第一次渲染时也等于空字符串。也许我应该只在<Listing> 中使用useEffect 而不是在其嵌套组件中？

组件挂载后是否调用dispatch，是否更新listingType值？

【参考方案1】：

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

【讨论】：

确实，设置一个非空字符串的默认值就可以了。谢谢你:)