React：如何正确调用函数来加载图像

Question

如标题所述，我正在尝试在我的 React 应用加载后立即加载图像。

我有一个 .jsx 文件，其中有一个名为 getHomePage() 的函数。 getHomePage() 包含 4 个函数。

当调用 getHomePage() 函数时，它会呈现一个下拉列表。下拉菜单包含一个 onChange 事件，用户可以在其中 select collection 图像。当这个 collection 被 selected 时，它调用一个名为 collectionChanged(e.target.value).

的函数

目标：

我想要的是在应用程序启动时立即加载图像。本质上，我想在应用程序加载时调用 collectionChanged(e.target.value) 函数。因此，我不再希望用户 select collection，而是希望 collection 图像在应用加载后立即加载。

我该怎么做？我希望以上所有解释都有意义。

文件：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 ONLOAD
      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;

Answer 1

您应该使用挂钩 useEffect 来加载您的图像：

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 ONLOAD
  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;

React：如何正确调用函数来加载图像

React: How to correctly call a function to load images

javascript

node.js

reactjs

react-native

react-hooks