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

【问题标题】：React - Access to an object property which is settled in useEffect hookReact - 访问在 useEffect 挂钩中设置的对象属性
【发布时间】：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值？

标签： javascript reactjs react-hooks use-effect react-context

【解决方案1】：

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

【讨论】：

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