'imgSrc' 未定义 no-undef

Question

考虑一下：

useEffect(() => {
    let imageUrlRequest = axios.get(imageEndPointString).then(function (response) {
        console.log('call made')
        let imgSrc = response.data[0].data.children[0].data.url;
        console.log(imgSrc)
      })
      .catch(function (error) {
        // handle error
        console.log(error);
      })
      .then(function () {
        // always executed
      });
  },[]);

  return (
    <div className="game__image">
      <h2>IMAGE URL: {imgSrc}</h2>
      <img src={imgSrc} />
    </div>
  );

为什么imgSrc未定义？

我也试过这个

let imgSrc;

  useEffect(() => {
    let imageUrlRequest = axios.get(imageEndPointString).then(function (response) {
        console.log('call made')
        imgSrc = response.data[0].data.children[0].data.url;
        console.log(imgSrc)
      })
      .catch(function (error) {
        // handle error
        console.log(error);
      })
      .then(function () {
        // always executed
      });
  },[]);

  return (
    <div className="game">
      <img src={imgSrc} />
    </div>
  );

但是图像还是传不出来。为什么？

Answer 1

In Javascript 在块内声明的变量只能在该块（局部作用域）中使用。此外，在 React 中，如果你想根据某个值更改你的视图，你必须使用 setState 函数来让 React 知道什么时候它应该 re-render 视图。

所以在你的例子中你需要做这样的事情：

const [imgSrc, setImgSrc] = useState(null);

useEffect(() => {
    let imageUrlRequest = axios.get(imageEndPointString).then(function (response) {
        console.log('call made')
        setImgSrc(response.data[0].data.children[0].data.url);
        console.log(imgSrc)
      })
      .catch(function (error) {
        // handle error
        console.log(error);
      })
      .then(function () {
        // always executed
      });   },[]);

  return (
    <div className="game__image">
      <h2>IMAGE URL: {imgSrc}</h2>
      <img src={imgSrc} />
    </div>   );

Answer 2

我认为这是因为在第一次渲染时（在 useEffect 之前）您试图使用变量 imgSrc 作为图像源，所以在 useEffect 执行之前出现错误。您可以做的是在 return 上使用默认值，以防 imgSrc 在那一刻仍未定义。像

<img src={imgSrc || "anotherurl.com"} />

只需使用任何占位符默认图像 url，您应该可以解决问题

'imgSrc' 未定义 no-undef

'imgSrc' is not defined no-undef

variables

reactjs