javascript - 组件仅在通过链接（单击）到达时正确呈现，而不是通过直接 URL/刷新

Question

我正在用 React + Redux + Firebase 建立一个电子商务商店。我面临的问题是Shop当路由打开时组件正确呈现（例如单击导航栏中的链接），但是当通过直接 URL 或页面刷新到达页面时，文章的图像不会显示向上。

该Shop页面从 Firestore 中获取文章数据，并从 Cloud Storage 中获取图片的可下载 URL。

您将在下面找到我的App组件的代码，该代码从 Firestore 和 Storage 获取描述的数据，并将这些数据分派到 Redux 存储。它还包含到Shop组件的路由。

const App = props => {

  const dispatch = useDispatch();
  useEffect(() => {
    const storageRef = storage.ref();
    const arr = [];
    dispatch(fetchProductsPending());

    async function fetchData() {
      try {
        await firestore
          .collection("necklaces")
          .get()
          .then(function(querySnapshot) {
            querySnapshot.forEach(function(doc) {
              // doc.data() is never undefined for query doc snapshots
              arr.push(doc.data());
              console.log("is")
            });
          })


          const asyncForEach = async (array, callback) => {
            for (let index = 0; index < array.length; index++) {
              await callback(array[index], index, array)
            }
          }
//Async forEach loop

          const start = async () => {
            await asyncForEach(arr, async (item) => {
              console.log(item)
              await storageRef.child(`images/${item.name}/1.png`).getDownloadURL().then(function(url) {
                return (
                  item.url = url
                  )
              });
              console.log(item.url)
          })
        }
          start();
        dispatch(fetchProductsSuccess(arr));

      } catch (err) {
        dispatch(fetchProductsError(err));
      }
    }
    fetchData();
  }, [])

  return (
   
        <Route path="/shop" render={({props}) => (
         <MainLayout>
           <Shop {...props}/>
         </MainLayout>
        )}>
          </Route>

这里是Shop使用来自 Redux 存储的信息的页面：

const mapState = ({ products }) => ({
  products: products.products,
  pending: products.pending
});

const Shop = props => {
  const { products, pending } = useSelector(mapState);

    return (
          <div className="row">
            {products.map((item, index) => {
              console.log(item)
              return (
                <ShopItems
                  name={item.name}
                  price={item.price}
                  key={item.id}
                  id={item.id}
                  url={item.url}
                />
              );
            })}

并且ShopItems从组件接收道具（redux 状态）Shop：

const ArticleItems = props => {
    return (
       <div className="article">
           <Link className="items" to={`/article/${props.id}`}>
           <img className="itemPicture" src={props.url} alt=""/>
           <h6>{props.name}</h6>
           <h6>{props.price}€&lt;/h6>
           </Link>
       </div>
    )
}

以防万一我的 Redux 代码在必要时：

行动

export function fetchProductsPending() {
    return {
        type: productTypes.FETCH_PRODUCTS_PENDING
    }
}

export function fetchProductsSuccess(products) {
    return {
        type: productTypes.FETCH_PRODUCTS_SUCCESS,
        payload: products
    }
}

export function fetchProductsError(error) {
    return {
        type: productTypes.FETCH_PRODUCTS_ERROR,
        payload: error
    }
}

减速器

const INITIAL_STATE = {
    pending: false,
    products: [],
    error: null
}

export function productsReducer(state = INITIAL_STATE, action) {
    switch(action.type) {
        case productTypes.FETCH_PRODUCTS_PENDING: 
            return {
                ...state,
                pending: true
            }
        case productTypes.FETCH_PRODUCTS_SUCCESS:
            return {
                ...state,
                pending: false,
                products: action.payload
            }
        case productTypes.FETCH_PRODUCTS_ERROR:
            return {
                ...state,
                pending: false,
                error: action.error
            }
        default: 
            return state;
    }
}

请帮助，我正在失去我的想法，我无法做到这一点。谢谢！

标签： javascripthtmlreactjsfirebaseredux