按索引查找对象并将其替换为其他对象。（反应/Redux）答案

【问题标题】：Find object by index and replace it with other object. (React/Redux)按索引查找对象并将其替换为其他对象。（反应/Redux）
【发布时间】：2016-11-08 18:13:54
【问题描述】：

我有下面的数组

var a = [{'error': 0 , 'link': 'www.abc.com'},{'error': 1 , 'link': 'www.xyz.com'},{'error': 2 , 'link': 'www.bbc.com'}]

现在我想用 lodash 在索引 1 的地方替换下面的对象

var b = {'error': 1 , 'link': 'www.change.com'}

所以输出应该低于数组

a = [{'error': 0 , 'link': 'www.abc.com'},{'error': 1 , 'link': 'www.change.com'},{'error': 2 , 'link': 'www.bbc.com'}]

但我不想通过 a[1] = b 来做。它在减速器状态下产生问题。我想切片 a 并在第一个索引中添加 b。

【问题讨论】：

不需要lodash？ a[1] = b ? ...
a[1].link = 'www.change.com'
@FelixKling，我认为，Kalashir 需要不变性（他使用 redux）。
@Yuriy：也许吧。问题中没有太多信息。
问题是你在你的 reducer 中改变状态而不是返回你的状态的一个新实例。 const newState = [].concat(state) 然后你可以做newState[1].link = 'whatever I want' 只记得在你的case语句中返回newState，这样你就可以在你的reducer中分配一个新的状态对象。

标签： javascript reactjs lodash

【解决方案1】：

如果您绝对需要保留该数组结构并使用 lodash，则可以解决问题：

const a = [{error: 0 , link: 'www.abc.com'}, {error: 1 , link: 'www.xyz.com'}, {error: 2 , link: 'www.bbc.com'}];
const b = {error: 1 , link: 'www.change.com'};
const c = _.map(a, item => item.error === b.error ? _.merge(item, b) : item);

由于 Redux 使用不变性，因此您并不想真正改变 a。您需要使用所需的转换创建一个新数组，在本例中为 const c。

在上面的 sn-p 中，c = [{error: 0 , link: 'www.abc.com'}, {error: 1 , link: 'www.change.com'}, {error: 2 , link: 'www.bbc.com'}]，这就是你所追求的。

_.map 返回一个新数组，而不是改变现有数组，因此const a 和const b 将保持原样，而const c 将是两者的合并。

编写可扩展到其他场景的代码可能是个好主意。上面的示例依赖于const b，这可能会限制您的代码。

我建议创建一个匿名的 replaceErrorLink 函数，您可以将其用于其他情况，例如（注意：这使用 ES6 语法）：

const a = [{error: 0 , link: 'www.abc.com'}, {error: 1 , link: 'www.xyz.com'}, {error: 2 , link: 'www.bbc.com'}];


const replaceErrorLink = collection => (error, link) => _.map(collection, item => item.error === error ? {...item, link} : item);

const b = replaceErrorLink(a)(1, 'www.change.com');
const c = replaceErrorLink(a)(2, 'www.changezz.com');
const d = replaceErrorLink(b)(2, 'www.changezz.com');

console.log('a: ', a); // note that a didn't mutate
console.log('b: ', b);
console.log('c: ', c);
console.log('d: ', d);

&lt;script src="https://cdn.jsdelivr.net/lodash/4.16.6/lodash.min.js"&gt;&lt;/script&gt;

【讨论】：