Question

我正在使用reactjs并使用lodash函数添加和删除数组元素，但是每当我添加或删除数组浏览器时，浏览器就会冻结或变慢一点。

看看应用：https://coindb.netlify.com Github存储库：https://github.com/solankivj94/hexteria

我将数组映射上的键从索引键更改为唯一键。但结果是一样的

addCoin = (key) => {
    let maxFav = 6;
    let favorites = [ ...this.state.fav ];

    if (favorites.length < maxFav && !_.includes(this.state.fav, key)) {
        favorites.push(key);
        this.setState({ fav: favorites });
    }
    // console.log(_.includes(this.state.fav, key));
};

removeCoin = (key) => {
    let favorites = [ ...this.state.fav ];
    this.setState({ fav: _.pull(favorites, key) });
    // console.log('REmove coiin');
};

Answer 1

在src/Components/Setting/CoinTile.js

更改此

<Tile onClick={clickCoinHandler(props.topSection, props.coinKey, props.addCoin, props.removeCoin)}>

为此

<Tile onClick={()=>{clickCoinHandler(props.topSection, props.coinKey, props.addCoin, props.removeCoin)}}>

还要更改clickCoinHandler函数

const clickCoinHandler = (topSection, coinKey, addCoin, removeCoin) => {
    return topSection ? removeCoin(coinKey) : addCoin(coinKey);
};

让我知道是否可行

在React Freezes浏览器中删除和添加数组中的元素

1 个答案: