在 React Freezes Browser 中删除和添加数组中的元素

【问题标题】：Removing and Adding element in array in React Freezes Browser在 React Freezes Browser 中删除和添加数组中的元素
【发布时间】：2019-02-19 05:45:52
【问题描述】：

我正在使用 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');
};

【问题讨论】：

标签： javascript arrays reactjs lodash

【解决方案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);
};

让我知道这是否有效

【讨论】：

它仍然落后。