Reactjs Map 函数只返回 Array 中的图像

主要问题在于:

setThumbnails([...thumbnails, res]);

有两个问题:

1. 它使用初始值thumbnails(我猜是[])，而不是异步工作完成时的当前值.

2. res是array，不是单个图像.

   相反，请使用回调表单，以便处理最新信息，并分发res:

   setThumbnails((previousThumbnails) => [...previousThumbnails, ...res]);
   

   这也将修复您 suppress 的ESLint错误.(这个错误很有帮助，我建议不要忽略它.)

以下是您可能需要考虑的一些其他问题:

3. 你的map人看起来很可疑.你有

   files.map(async (file, idx) => {
   

   …但你正在做

   const image = await resizeFile(file[idx]);
   

   …但file已经是files的一个元素，所以除非files是数组of arrays，否则在那里只需要file而不是file[idx].(即使它是一个数组，使用第一个数组的索引0处的值，然后使用第二个数组的索引1处的值，这似乎很奇怪，以此类推.)

4. 在async函数中使用new Promise.这是explicit promise creation anti-pattern，这里没有理由这么做.

5. 您当前的代码忽略了调整文件大小的错误，而不是将其转储到控制台.我假设你真的想这么做，但一旦你用async/await，我会用try/catch来处理.

综上所述:

useEffect(() => {
    const CallMe = async () => {
        return Promise.all(files.map(async (file) => {
            try {
                return await resizeFile(file);
            } catch (error) {
                // Not really ideal to just ignore errors
                // Note this will leave an `undefined` in the returned array
                console.log(error);
            }
        }));
    };

    CallMe()
        .then((res) => {
            // Remove blank elements from the array
            res = res.filter(Boolean);
            // If we have any left, use them
            if (res.length) {
                setThumbnails((thumbnails) => [...thumbnails, ...res]);
            }
        })
        .catch((error) => {
            // ...handle/report error...
        });
}, [files]);

关于这一点，有几点需要注意:

<img
   key={idx}
   src={img}
   alt="soso"
   height={100}
   width={100}
></img>

因为我们知道你的数组会改变(如果files改变，如果它来自props，它可以改变)，使用索引作为键将无法正常工作；从the react docs中可以看出:

如果项的顺序可能会更改，我们不建议对键使用索引.这可能会对性能产生负面影响，并可能导致组件状态问题.请参阅Robin Pokorny的文章以获得in-depth explanation on the negative impacts of using an index as a key.如果您 Select 不为列表项分配显式键，则React将默认使用索引作为键.

在我看来，他们说的不够强烈:你会得到重复的显示元素或没有从显示中删除的元素，等等.索引作为键对于static个列表来说只是一个有效的 Select .

最后，<img ...></img>在JSX中更惯用地写成<img .../>.(而且你永远不会用HTML写它；img是一个void元素.)