As the title states, I'm attempting to load images as soon as my react app loads.

I have a .jsx file, where there is a function called getHomePage(). The getHomePage() contains 4 functions.

When the getHomePage() function is called, it renders a dropdown. The dropdown contains an onChange event, where a user is able to select a collection of images. When this collection is selected, it calls a function called collectionChanged(e.target.value).

Goals:

What I want is for the images to load as soon as the application starts. Essentially, I want to call the collectionChanged(e.target.value) function when the application loads. So, I no longer want a user to select a collection, but for the collection of images to load as soon as the app loads.

How do I go about doing this? I hope all the above explanation made sense.

File: home.jsx

function getHomePage() {
      const [token, setToken] = useState("");
      const [visibility, setVisibility] = useState(false);
      const [NFTBalances, setNFTBalances] = useState();
      const [collection, setCollection] = useState();
      const [nft, setNft] = useState();
      const { Moralis } = useMoralis();
    
      const handleChangeCollection = async (col) => {
        const dbNFTs = Moralis.Object.extend(col);
        const query = new Moralis.Query(dbNFTs);
        query.ascending("rank");
        const topNFTs = query.limit(8);
        const results = await topNFTs.find();
        setNFTBalances(results);
      };
    }
    
    
    const handleSelectToken = async (num, col) => {
        if (num && col) {
          const dbNFTs = Moralis.Object.extend(col);
          const query = new Moralis.Query(dbNFTs);
          console.log(num);
          query.equalTo("tokenId", num);
          let selectedNFT = await query.first();
          selectedNFT = selectedNFT.attributes;
          console.log(selectedNFT);
          setNft(selectedNFT);
          setVisibility(true);
        }
      };
    
// FUNCTION I WANT TO CALL onl oad
      const collectionChanged = async (col) => {
        setCollection(col);
        handleSelectToken(token, col);
        handleChangeCollection(col);
      };
    
    
      const addToNFTs = async (col) => {
        const dbNFTs = Moralis.Object.extend(col);
        const query = new Moralis.Query(dbNFTs);
        query.ascending("rank");
        query.limit(4);
        const topNFTs = query.skip(NFTBalances.length);
        const results = await topNFTs.find();
        setNFTBalances(NFTBalances.concat(results));
      }
    
    return (
      <>
    // DROP DOWN SECTION
    <div>
      <select onChange={(e) => collectionChanged(e.target.value) }>
            <option value="">Select a Collection</option>
            <option value={"myCollection"}>My Collection</option>
      </select>
    </div>
    
    <div className="row">
         {NFTBalances && NFTBalances.map((nft, index) => {
             return (
                   <div className="col-xxl-3 col-xl-3 col-lg-6 col-md-6">
                     <div className="card items">
                       <Card key={index} onClick={() => 
                          handleSelectToken(nft.attributes.tokenId,collection)}
                              cover={ <Image src={nft.attributes.image} /> }>
                       </Card>
                      </div>     
                    </div> 
                     );
         })}
   </div>               
      </>        
);
}

export default getHomePage;

CodePudding user response：

You should use the hook useEffect in order to load your images:

function getHomePage() {
  const [token, setToken] = useState("");
  const [visibility, setVisibility] = useState(false);
  const [NFTBalances, setNFTBalances] = useState();
  const [collection, setCollection] = useState();
  const [nft, setNft] = useState();
  const { Moralis } = useMoralis();

  useEffect(() =>  {
    //call your function to load your images
    collectionChanged('myCollection')
  }, [])

  const handleChangeCollection = async (col) => {
    const dbNFTs = Moralis.Object.extend(col);
    const query = new Moralis.Query(dbNFTs);
    query.ascending("rank");
    const topNFTs = query.limit(8);
    const results = await topNFTs.find();
    setNFTBalances(results);
  };
}


const handleSelectToken = async (num, col) => {
    if (num && col) {
      const dbNFTs = Moralis.Object.extend(col);
      const query = new Moralis.Query(dbNFTs);
      console.log(num);
      query.equalTo("tokenId", num);
      let selectedNFT = await query.first();
      selectedNFT = selectedNFT.attributes;
      console.log(selectedNFT);
      setNft(selectedNFT);
      setVisibility(true);
    }
  };

// FUNCTION I WANT TO CALL onl oad
  const collectionChanged = async (col) => {
    setCollection(col);
    handleSelectToken(token, col);
    handleChangeCollection(col);
  };


  const addToNFTs = async (col) => {
    const dbNFTs = Moralis.Object.extend(col);
    const query = new Moralis.Query(dbNFTs);
    query.ascending("rank");
    query.limit(4);
    const topNFTs = query.skip(NFTBalances.length);
    const results = await topNFTs.find();
    setNFTBalances(NFTBalances.concat(results));
  }

return (
  <>
// DROP DOWN SECTION
<div>
  <select onChange={(e) => collectionChanged(e.target.value) }>
        <option value="">Select a Collection</option>
        <option value={"myCollection"}>My Collection</option>
  </select>
</div>

<div className="row">
     {NFTBalances && NFTBalances.map((nft, index) => {
         return (
               <div className="col-xxl-3 col-xl-3 col-lg-6 col-md-6">
                 <div className="card items">
                   <Card key={index} onClick={() => 
                      handleSelectToken(nft.attributes.tokenId,collection)}
                          cover={ <Image src={nft.attributes.image} /> }>
                   </Card>
                  </div>     
                </div> 
                 );
     })}
</div>               
  </>        
);
}

export default getHomePage;