React：如何通过匹配另一个状态变量的值来修改状态变量

Question

我正在为面部识别应用构建前端，这是我第一次使用 react。我很难弄清楚如何将我的一个状态变量的值与另一个匹配，以此来确定要修改哪个对象的状态。让我布置一下场景。

我定义了如下所示的状态变量：

this.state = {current_name: '', correct: 0, people: [ {name: 'Alice', here: "Not Here"}, {name: 'Bob', here: "Not Here"}]}

字符串“current_name”每半秒更新一次，通过向外部端点发出请求以流式传输谁在帧中。我还有一个用于更新状态的处理程序，如下所示：

  CorrectHandler(){
this.setState(prevState =>({
  correct: prevState.correct + 1
}));}

我在我的应用中通过“onclick”事件触发。

我希望能够在我的处理程序中包含一个函数，该函数通过人名的值（即“Bob”）来识别一个人，并将“here”属性的状态更改为一个新字符串。

似乎可能有一个非常简单的解决方案，但我太新了，无法做出反应和 javascript 来查看它。任何建议将不胜感激！

Answer 1

我想说最好的方法是使用 Array.map() 和 Object.assign() 将您的 people 数组更改为具有新值的数组，如下所示：

function updateSpecificPerson(person) {
    if ( person.name === "Bob" ) {
        //it's Bob! Make a shallow copy of him with his new "here" value
        return Object.assign({}, person, { here: "somewhere" });
    }
    // it's not Bob - leave the object alone
    return person;
}

this.setState(prevState => {
    return {
       //copy over all the people, except Bob, who gets modified during copy
       people: prevState.people.map(updateSpecificPerson)
    };
});

应该可以直接将Bob 和somewhere 更改为您控制的变量。