递增值并将其设置为 var 到 onClick 事件

IT技术 reactjs
2021-05-10 02:25:31

我正面临一个非常奇怪的问题，导致感觉像是“随便你打电话”

首先这里是代码：

renderImages = () => {
    let i = 0;
    const arr = [
        "https://truffle-assets.imgix.net/pxqrocxwsjcc_6OcJeUMaWIYOmKgsK6IwWc_galaxy-cupcakes_squareThumbnail_en-US.jpeg",
        "https://sallysbakingaddiction.com/wp-content/uploads/2017/06/moist-chocolate-cupcakes-5.jpg",
        "http://is4.mzstatic.com/image/thumb/Purple127/v4/74/47/31/7447317e-9844-3ee0-d189-661a55c94abe/source/1200x630bb.jpg",
        "https://i.pinimg.com/736x/55/03/94/550394c428e268868aa73e509302b84c--neopolitan-cupcakes-ice-cream-cupcakes.jpg"
    ];

    return arr.map((item) => {
        i++;
        return(
            <div>
                <img src={item} onClick={() => alert(i)} alt={i} />
            </div>
        );
    })
};

现在，当我单击图像时，它始终显示 4。第一张图像显示 4，最后一张图像显示 4。所有这些都显示 4。但是，它们的 alt 标签似乎是正确的。我不认为我做错了什么，但我是:)

我的react版本是 16.1.1

所以有人知道我在这里做错了什么吗？我不认为这是一个绑定问题，但谁知道呢。

2个回答

JavaScript 的作用域是函数级的，而不是块级的，创建闭包只是意味着将封闭的作用域添加到封闭函数的词法环境中。

循环终止后，函数级变量 i 的值为 4，这就是内部函数“看到”的。

现在即使let有一个块作用域，它的作用域也仅限于renderImages函数而不是函数map，因此你仍然有一个闭包问题。

但是map为您提供second argumentas an index，您可以使用它而不是增加变量并使用它

renderImages = () => {
    const arr = [
        "https://truffle-assets.imgix.net/pxqrocxwsjcc_6OcJeUMaWIYOmKgsK6IwWc_galaxy-cupcakes_squareThumbnail_en-US.jpeg",
        "https://sallysbakingaddiction.com/wp-content/uploads/2017/06/moist-chocolate-cupcakes-5.jpg",
        "http://is4.mzstatic.com/image/thumb/Purple127/v4/74/47/31/7447317e-9844-3ee0-d189-661a55c94abe/source/1200x630bb.jpg",
        "https://i.pinimg.com/736x/55/03/94/550394c428e268868aa73e509302b84c--neopolitan-cupcakes-ice-cream-cupcakes.jpg"
    ];

    return arr.map((item, index) => {
        return(
            <div>
                <img src={item} onClick={() => alert(index)} alt={index} />
            </div>
        );
    })
};

这是对嵌套数组执行此操作的方法

const arr = [[
        "https://truffle-assets.imgix.net/pxqrocxwsjcc_6OcJeUMaWIYOmKgsK6IwWc_galaxy-cupcakes_squareThumbnail_en-US.jpeg",
        "https://sallysbakingaddiction.com/wp-content/uploads/2017/06/moist-chocolate-cupcakes-5.jpg",
        "http://is4.mzstatic.com/image/thumb/Purple127/v4/74/47/31/7447317e-9844-3ee0-d189-661a55c94abe/source/1200x630bb.jpg",
        "https://i.pinimg.com/736x/55/03/94/550394c428e268868aa73e509302b84c--neopolitan-cupcakes-ice-cream-cupcakes.jpg"
    ],[
        "https://truffle-assets.imgix.net/pxqrocxwsjcc_6OcJeUMaWIYOmKgsK6IwWc_galaxy-cupcakes_squareThumbnail_en-US.jpeg",
        "https://sallysbakingaddiction.com/wp-content/uploads/2017/06/moist-chocolate-cupcakes-5.jpg",
        "http://is4.mzstatic.com/image/thumb/Purple127/v4/74/47/31/7447317e-9844-3ee0-d189-661a55c94abe/source/1200x630bb.jpg",
        "https://i.pinimg.com/736x/55/03/94/550394c428e268868aa73e509302b84c--neopolitan-cupcakes-ice-cream-cupcakes.jpg"
    ]];
    
const renderImages = (arr, idx) => {
    return arr.map((item, index) => {

        return(
            <div>
                <img src={item} onClick={() => alert(idx + index)} alt={idx + index} />
            </div>
        );
    })
};
const App = () => {
    let i = 0;
    
    return (
        <div>{arr.map((array, index) => {
            const val = renderImages(array, i);
            i += array.length;
            return <div>{val}</div>
        })}</div>
    )
}



ReactDOM.render(<App/>, document.getElementById('app'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"/>

尝试通过以下方式修改您的代码：

return arr.map((item, index) => {

        return(
            <div>
                <img src={item} onClick={() => alert(index)} alt={index} />
            </div>
        );
    })

这样你就可以i完全删除。还要记住，索引是从零开始的，所以你可能想用 1 增加它。

其它你可能感兴趣的问题
上一篇React Redux：获取props和更新状态 下一篇在 Blazor 页面内渲染react组件