Reactjs 按键和值过滤状态

IT技术 javascript arrays reactjs state
2021-05-21 11:06:15

在这里react新手。

我正在尝试匹配位于我所在州的特定 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(?????)
};

帮助将不胜感激！

干杯

2个回答

您可以使用阵列map方法上library在您的状态排列，并且只返回元素是，如果_id不匹配，并更新value，如果_id不匹配。

updateRead = (_id, event) => {
  const { value } = event.target;

  this.setState(prevState => ({
    library: prevState.library.map(read => {
      if (read._id !== _id) {
        return read;
      }
      return {
        ...read,
        value
      };
    })
  }));
};

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

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

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

所以：

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

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

其它你可能感兴趣的问题
上一篇在javascript中访问嵌套数组项 下一篇重定向到函数 React Router Dom 中的路由