未呼叫useEffect函式

我試圖在觸發某些通過 Context API 傳遞的狀態時渲染一個組件，但是在console.log到處添加一個之后，我注意到問題在于我useEffect()沒有運行，我不知道為什么：

interface ImageResponse {
  message: string;
}
interface ImageProps {
  breed: string;
  opened: boolean;
}
const BreedImageGenerator: FunctionComponent<ImageProps> = (opened, breed) => {
  const [randomImages, setRandomImage] = useState<ImageResponse[]>([]);

  useEffect(() => {
    const fetchRandomImages = async () => {
      const res: AxiosResponse = await axios.get<ImageResponse>(
        `https://dog.ceo/api/breed/${breed}/images/random/4`
      );
      setRandomImage(res.data.message);
      console.log(randomImages);
    };
  }, []);

  return (
    <Box
      id="randomBreedImage">
      <Box>
        <ImageList sx={{ width: 500, height: 450 }}>
          <ImageListItem key="Subheader" cols={2}>
            <ListSubheader component="div">{breed}</ListSubheader>
          </ImageListItem>
          {randomImages &&
            randomImages.map((randomImage) => (
              <ImageListItem key={randomImage}>
                <img
                  src={randomImage}
                />
              </ImageListItem>
            ))}
        </ImageList>
      </Box>
    </Box>
  );
};
export default BreedImageGenerator;

我確信每個道具都被正確傳遞了，你可以看到console log我的里面也有一個useEffect()，但沒有運氣。有任何想法嗎？

我什至嘗試從內部洗掉所有內容useEffect()并保留 aconsole.log但沒有記錄任何內容，這真的很奇怪，因為當我呼叫組件時（在我前面提到的那些條件之后），所有條件都評估為真。

這是我的組件被呼叫的地方：

<Grid item md="auto" xl={3.5}>
          {breeds &&
            breeds.map((breed) => {
              clickedBreed[breed.key] && isOpened && (
                <BreedImageGenerator
                  breed={breed.key}
                  opened={isOpened}
                  key={breed.key}
                />
              );
            })}
        </Grid>

而且我知道所有這些都評估為真，因為當我<BreedImageGenerator/>用 a替換時console.log()，它正在記錄。

另外，這樣做：

 const [randomImages, setRandomImage] = useState<ImageResponse[]>([]);

  useEffect(() => {
    const fetchRandomImages = async () => {
      const res: AxiosResponse = await axios.get<ImageResponse[]>(
        `https://dog.ceo/api/breed/${breed}/images/random/4`
      );
      setRandomImage(res.data.message);
      
    };
    fetchRandomImages();

    console.log(randomImages);
  }, []);

什么都沒有改變，我的組件仍然沒有被渲染。

uj5u.com熱心網友回復：

創建fetchRandomImages()函式后，您需要呼叫它。

例如

 useEffect(() => {
    const fetchRandomImages = async () => {
      const res: AxiosResponse = await axios.get<ImageResponse>(
        `https://dog.ceo/api/breed/${breed}/images/random/4`
      );
      setRandomImage(res.data.message);
      console.log(randomImages); //Do not call console.log right after setting state as it's still not ready.
    };
    fetchRandomImages() // You need to call the function here.
  }, []);

  useEffect(() => {
     console.log(randomImages) //use it here.
  },[randomImages]) //this useEffect calls when randomImages changed.

uj5u.com熱心網友回復：

在 useEffect 中宣告函式并不意味著它會執行，您必須通過鍵入 fetchRandomImages() 來執行

uj5u.com熱心網友回復：

好的，我剛剛修復了它，所以我洗掉了這些opened道具作為測驗，因為我在某處讀到功能組件只接受一個傳遞給它們的道具（不知道為什么），并breed在括號內添加了道具，這是我避免的，因為我我在打字稿中遇到了一個錯誤（像往常一樣）。另外，所有的評論都有幫助，所以謝謝你！

標籤：反应 打字稿

上一篇：檢查一個陣列是否包含來自另一個陣列的任何值？

下一篇：通過Typescript支持向Playwright添加自定義匹配器