state 未在開關中由 javascript 定義

Question

我想在開關中使用 state 作為道具

如果頁面是板，我想獲得 postData 和 PostLoading。 然后交給pagePresenter。 researchData和researchLoading是null。

下面的代碼顯示 postData、postLoading、researchData、researchLoading 未定義。

export default ({
    match: {
      params: { code, page },
    },
  }) => {
      switch(page){
        case "board":
            const { data: postData, loading: postLoading } = useQuery(ALL_POST, {
              variables: { code },
              fetchPolicy: "network-only",
            });
            const onPostClick = (id, code) => {
              history.push(`/article/${code}/${id}`);
            };
            break;
          case "research":
            const { data: researchData, loading: researchLoading } = useQuery(
              ALL_RESEARCH,
              {
                variables: { code },
              }
            );
            break;
      
          default:
            return null;
      }
      return (
        <PagePresenter
        type={page}
        postLoading={postLoading ? postLoading : null}
        postData={postData ? postData : null}
        researchLoading={researchLoading ? researchLoading : null}
        researchData={researchData ? researchData : null}
      />
      )
  }

Answer 1

我懷疑因為你在switch的上下文中聲明了const { data: postData, loading: postLoading } ，所以它在這個上下文之外是未定義的。 就像在 function 內部聲明一個變量一樣。我建議你利用useState鈎子。 只需在switch外部初始化一個空白 state 並在獲取postData后將其設置為postData 。

所以在你的switch外面的某個地方做const [postDataState, setPostData] = useState(undefined)然后在你有你的postData之后，做setPostData(postData) 。

最后，將postDataState作為 props 傳遞給您的組件。 所以不是postData={postData? postData: null} postData={postData? postData: null}你會說postData={postDataState? postDataState: null} postData={postDataState? postDataState: null}

不要忘記import {useState} from 'react'