Question

我有一个计数器应用，可以简单地增加其组件状态。

这是沙盒应用程序链接：https://codesandbox.io/s/5mxqzn001k。您可以在第30行上的文件 src / components / counters.jsx 上看到 counters.indexOf（counter），该文件可以找到目标对象并进行设置它的新值并有效。

handleIncrement = counter => {
    const counters = [...this.state.counters];
    const index = counters.indexOf(counter);
    counters[index] = { ...counter };
    counters[index].value++;
    this.setState({ counters });
};

我尝试在此链接中重复使用香草js方法查找目标对象的函数： https://repl.it/@stoic25/TrickyForsakenLamp，但我想知道为什么它不起作用？

const state = {
    counters: [
        { id: 1, value: 4 },
        { id: 2, value: 0 },
        { id: 3, value: 0 },
        { id: 4, value: 0 }
    ]
};

let myArr = state.counters.indexOf({ id: 4, value: 0 });
console.log( myArr );
// returns -1

ReactJS的“ indexOf”函数行为与普通js不同吗？

Answer 1

对象仅在引用对象的完全相同的实例时才彼此相等。如果将数组中对象的引用传递给indexOf函数，它将通过比较引用来找到索引，但是如果传递新对象，则它将不比较对象的每个键以在数组中查找对象的索引。数组。对于第二个示例，请尝试以下操作，看看它是否可以工作：

const state = {
  counters: [
    { id: 1, value: 4 },
    { id: 2, value: 0 },
    { id: 3, value: 0 },
    { id: 4, value: 0 }
  ]
};
let obj=state.counters[3]
let myArr = state.counters.indexOf(obj);
console.log( myArr );

在您的第一个react示例中，传递给handleIncrement函数的计数器对象是对您state.counters中对象的引用，因此它返回其索引。

ReactJS中的“ IndexOf”函数不能像普通的JS方法那样工作

1 个答案: