了解背景關系和陣列型別

下午好，

我正在為我的應用程式設定背景關系，但在初始加載后遇到了資訊顯示問題。初始應用程式加載然后導航到產品頁面，一切都正確顯示，但如果我要在產品螢屏上重新加載頁面，則資訊丟失。如果我要在產品螢屏上重新加載頁面，然后單擊導航單擊到同一頁面，資訊將正確加載。

index.js

//Context
import UserContextProvider from "./components/context/UserContext";
import ProductsContextProvider from "./components/context/ProductsContext";
import CartContextProvider from "./components/context/CartContext";

ReactDOM.render(
  <BrowserRouter>
    <UserContextProvider>
      <ProductsContextProvider>
        <CartContextProvider>
          <App />
        </CartContextProvider>
      </ProductsContextProvider>
    </UserContextProvider>
  </BrowserRouter>,
  document.getElementById("root")
);

應用程式.js

const App = () => {
  return (
    <div className="App">
      <Switch>
        <Route exact path="/" component={HomePageScreen} />
        <Route exact path="/shop/bands" component={BandsPageScreen} />
        <Route exact path="/shop/photo" component={InsertPageScreen} />
        <Route exact path="/shop/products" component={ProductScreen} />
     </Switch>
    </div>
  );
};

productContext.js

import React, { createContext, useState } from "react";
import axios from "axios";

export const ProductsContext = createContext();

const initialState = [];

const ProductsContextProvider = ({ children }) => {
  const GetProducts = async () => {
    await axios.get("/api/products/find/all").then((response) => {
      if (response.data.results) {
        for (var i = 0; i < response.data.results.length; i  ) {
          initialState.push(response.data.results[i]);
        }
      }
    });
  };
  GetProducts();
  const [products] = useState(initialState);
  console.log("Setting Product Context");

  return (
    <ProductsContext.Provider value={{ products }}>
      {children}
    </ProductsContext.Provider>
  );
};

export default ProductsContextProvider;

productScreen.js

import { React, useContext, useState, useEffect } from "react";
import axios from "axios";
import HeaderBar from "./modules/header";
import { Button, Image, Icon, Card, Container } from "semantic-ui-react";
import Temp from "../../img/tempphoto.png";

//Context Files
import { UserContext } from "../context/UserContext";
import { ProductsContext } from "../context/ProductsContext";

const ProductScreen = () => {
  const activeScreen = "productScreen";
  const { products } = useContext(ProductsContext);

  console.log(products);

  const allProducts = products.map((product) => (
    <Card raised key={product.sku}>
      <Image src={Temp} wrapped ui={false}></Image>
      <Card.Content>
        <Card.Header>{product.title}</Card.Header>
        <Card.Meta>
          Sku: {product.sku} | Color: {product.color}
        </Card.Meta>
        <Card.Description> {product.description}</Card.Description>
      </Card.Content>
      <Card.Content extra>
        {/* <Button color="green" onClick={(e) => addItemCart(product._id, e)}>
          <Icon name="add to cart"></Icon>Add to Card
        </Button> */}
      </Card.Content>
    </Card>
  ));

  return (
    <>
      <HeaderBar screen={activeScreen} />
      <Container>
        <Card.Group>{allProducts}</Card.Group>
      </Container>
    </>
  );
};

export default ProductScreen;

1. 重新加載產品螢屏 -> 重新加載后的第一個陣列
2. 單擊導航鏈接-> 單擊后的第二個陣列（此處所有內容都正確加載）。

不知道我做錯了什么，但資訊被存盤在我所看到的背景關系中。

uj5u.com熱心網友回復：

您正在initialState異步填充您的陣列，并將products陣列設定為使用該空陣列作為其初始狀態，然后通過從回應中推入專案來繼續改變狀態。

除了狀態之外，您還應該定義狀態設定器函式，然后在所有回應完成時呼叫狀態設定器。

您還需要一個useEffect以便僅在掛載時呼叫 API 一次，而不是在每次重新渲染時呼叫。

const ProductsContextProvider = ({ children }) => {
    const [products, setProducts] = useState([]);
    useEffect(() => {
        axios.get("/api/products/find/all")
            .then((response) => {
                const { results } = response.data;
                if (results) {
                    setProducts(results);
                }
            })
        // .catch(handleErrors); // don't forget this part
    }, []);
    return (
        <ProductsContext.Provider value={{ products }}>
            {children}
        </ProductsContext.Provider>
    );
};

標籤：

上一篇：如何將值呈現到螢屏上？

下一篇：使用yarnupgrade命令更新但收到警告以更新更多資訊