解决了promise，但无法将数据插入react项目

Question

使用 contentful 作为我的 CMS 并使用下面的代码检索我的内容

const ProductsGrid = () => {
    let imageURL;
    
    client.getEntries().then(function (entries) {
        entries.items.forEach(function (entry) {
            imageURL = entry.fields.image.fields.file.url
            console.log(imageURL)
        }
        )
    })

这有效，我可以在控制台中看到我的 imageURL //images.ctfassets.net/zpu537igy6hd/10jOjKpdTYAYRVc197KlAs/60910da04dceab7acda47c042261776e/397526804_263713576623932_2944288645324919698_n.jpg ProductsGrid.jsx:17 //images.ctfassets.net/zpu537igy6hd/2fat5G5gnOIT00YAdoSVZg/ea3f8c44b62cf977bc8a0d5b3e4eeea7/397492507_267421149586508_6988846565487064728_ n.jpg

问题是我无法让这个 imageURL 在我的 React 项目中渲染出来

return (
                      <figure className='px-4 pt-4'>
                            <img
                                src={imageURL}
                                alt={title}
                                className='rounded-xl h-64 md:h-48 w-full object-cover'
                            />
                        </figure>

imageURL 返回未定义而不是我的 URL 链接。 我是否错误地履行了我的承诺？

谢谢

Answer 1

状态是必须的。

由于获取 url 的异步调用将晚于组件渲染完成，因此在这种情况下，初始渲染时的 url 将是未定义的。现在的要求是，一旦获取了 url，我们就需要进行另一个渲染。因此，为了触发新的渲染，需要一个状态。获取的 url 将针对此状态进行设置，并且此状态更改将导致另一个渲染和所需的输出。

请看下面两组示例代码。

a。没有状态

export default function App() {
  let url;

  new Promise((resolve) => {
    setTimeout(() => resolve('http://someurl'), 1000);
  }).then((newurl) => (url = newurl));

  return <>{url ? url : 'no url'}</>;
}

试运行

加载应用程序时

b。有状态

import { useState } from 'react';

export default function App() {
  const [url, setURL] = useState();

  new Promise((resolve) => {
    setTimeout(() => resolve('http://someurl'), 1000);
  }).then((url) => setURL(url));

  return <>{url ? url : 'no url'}</>;
}

试运行

设定的1秒超时后。