Question

在这里与新手联系。

我正在尝试匹配位于我所在州的特定ID的值，因此可以在通过api更新数据库之前更改一些值。

状态为

state = {
library: []
}

，然后在axios更改状态时，数组看起来像这样：

0:{_id:"", time:"", value:""},
2:{_id:"", time:"", value:""}

当我运行console.log时，它是这样读取的。

(2) [{…}, {…}]0: {_id: "5c82803ad634ea0bebfb3eff", time: "2019-03-08T14:46:18.663Z", value:""}1: {_id: "5c827fb9d634ea0bebfb3efe", time: "2019-03-08T14:44:09.818Z", value:""}

因此，基本上，当我键入由_id标识的特定输入字段时，我需要更新该特定状态的值状态。

这是我到目前为止编写的代码。 _id是输入字段的唯一键和我输入的事件值。

updateRead = (_id, event) => {
    console.log(_id);
    console.log(event.target.value)
    this.setState(?????)
};

我们将不胜感激！

欢呼

Answer 1

您可以在状态下的library数组上使用数组map方法，并在_id不匹配的情况下按原样返回元素，并更新{{ 1}}，如果value匹配。

_id

Answer 2

React中的两个基本状态规则是：

Never modify state directly
根据现有状态（more）设置状态时，请使用setState的回调版本

另外，在事件处理程序返回之后，您将无法访问综合事件的属性，因此您将需要在调用setState之前获取值（因为对回调的调用将是异步的）。

在回调中，您将复制数组，找到相关对象，将其复制并设置值。

所以：

updateRead = (_id, event) => {
    const {value} = event.target;
    this.setState(({library}) => ({
        library: library.map(entry => entry._id === _id ? {...entry, value} : entry)
    }));
};

map根据先前阵列的条目创建一个新阵列。如果ID（使用属性扩展符号）与更新的value匹配，则回调将返回一个新对象，或者返回原始对象（因为我们不必复制我们没有修改的对象）。

React.js通过键和值过滤状态

2 个答案: