promise 完成后停止重新渲染

Question

这是一个简单的反应应用程序，它从美国航空航天局获取数据 api.Div 标签正在连续重新渲染（如无限循环）是否有任何方法可以在 api 之后停止获取承诺是 fulfilled.Also 我的 arr 正在改变它的价值。 .提前致谢。

 function App() {
      const [arr, setarr] = useState([]);
      var promise = new Promise(async(resolve, reject) => {
        axios
          .get(
            "https://api.nasa.gov/planetary/apod?api_key=R4s5xcOxoYklREakJOSoeNMCOK4tpM8iqg6slJ15&count=2&hd=true"
          )
          .then((res) => {
            //res.data[i].hdurl
            resolve(res.data);
          });
        return promise;
      });
    
      let show = () => {
        promise.then((result) => {
          setarr(result);
        });
      };
      //show();
    
      return (
        <>
           <div className="container">
            {arr.map((val, i) => {
              return (
                <div
                  id="carouselExampleIndicators"
                  className="carousel slide"
                  data-bs-ride="carousel"
                >
                  <div className="carousel-indicators"></div>
                  <div className="carousel-inner">
                    <div className="carousel-item active">
                      <img
                        src={val.hdurl}
                        key={i}
                        className="d-block w-100"
                        alt="img"
                      ></img>
                      <br />
                    </div>
                  </div>
                </div>
              );
            })}
          </div>
        </>
      );
    }
    
    export default App;

Answer 1

您需要将 API 个请求放在 useEffect 挂钩下。末尾的空依赖数组意味着钩子只会在组件首次渲染时触发一次。这是代码：

import { useEffect } from "react";

const App = () => {
  const [arr, setArr] = useState([]);
  useEffect(() => {
    axios
      .get(
        "https://api.nasa.gov/planetary/apod?api_key=R4s5xcOxoYklREakJOSoeNMCOK4tpM8iqg6slJ15&count=2&hd=true"
      )
      .then((res) => {
        setArr(res.data);
      });
  }, []);

  return (
    <>
      <div className="container">
        {arr.map((val, index) => {
          return (
            <div
              id="carouselExampleIndicators"
              className="carousel slide"
              data-bs-ride="carousel"
              key={index}
            >
              <div className="carousel-indicators"></div>
              <div className="carousel-inner">
                <div className="carousel-item active">
                  <img
                    src={val.hdurl}
                    className="d-block w-100"
                    alt="img"
                  ></img>
                  <br />
                </div>
              </div>
            </div>
          );
        })}
      </div>
    </>
  );
};

export default App;

promise 完成后停止重新渲染

stop re rendering after promise is fulfilled

javascript

reactjs

es6-promise

axios