当前位置: 首页 > 面试题库 >

ReactJS-数组中对象键的setState

拓拔弘厚
2023-03-14
问题内容

因此,我已经进行了一段时间的尝试,并认为最好重构我的代码,以便将状态设置为对象数组。我想做的是单击按钮时增加一个数字。

我在组件中有一个回调函数,可触发一个函数来更新状态…但是,我很难将对象内的键值作为目标。

我的初始状态如下:

getInitialState: function() {
    return {
      items: [
        {
          links: 'zest',
          trackId: 1023,
          songTitle: 'z know the others',
          artist: 'zuvet',
          upVotes: 0
        },
        {
          links: 'alpha',
          trackId: 987,
          songTitle: 'ass',
          artist: 'arme',
          upVotes: 3
        },
      ]
    }

我正在尝试锁定upVotes键,但不知道如何操作。我的函数传递了一个键,以便可以将数组中的索引作为目标,但是当我尝试执行以下操作时:this.setState({items[key]:{upVotes: this.state.items[key].upVotes + 1}})由于意外的[令牌,它会引发错误。

我曾尝试与此类似线程的东西在这里,但我不断收到错误。

我可以编写什么样的函数来将要定位的对象的键的setState设置为setState?


问题答案:

获取当前状态,对其进行修改setState()

var stateCopy = Object.assign({}, this.state);
stateCopy.items[key].upVotes += 1;
this.setState(stateCopy);

注意: 这会改变状态。这是不做任何更改的方法:

var stateCopy = Object.assign({}, this.state);
stateCopy.items = stateCopy.items.slice();
stateCopy.items[key] = Object.assign({}, stateCopy.items[key]);
stateCopy.items[key].upVotes += 1;
this.setState(stateCopy);


 类似资料:
  • 所以我在这方面做了一段时间,觉得最好重构我的代码,以便将状态设置为一个对象数组。我要做的是增加一个点击按钮的数字。 我在这里尝试过类似于这个线程的东西,但是我不断得到错误。 我可以编写什么样的函数来设置我想要目标的对象中的键的状态?

  • 问题内容: 我试图通过对象属性(此示例的名称)并在函数的轻松循环中列出它们。我发现这样做有些尴尬,但这似乎不正确。 这是我得到的: 有一个更好的方法吗?我只需要一个循环即可遍历对象数组,列出所需的属性并创建许多html节点之一。 问题答案: 您可以简单地在数组上 映射

  • 问题内容: 假设您有一个非常简单的数据结构: …并且您想将其中一些存储在javascript变量中。如我所见,您有三个选择: 如果您要存储(或希望可能拥有)多个“价值”部分(例如,增加他们的年龄等),显然第二或第三种选择是可行的,因此,为了论证,让我们假设在此结构中再也不需要任何数据值了。您选择哪一个,为什么? 编辑 :该示例现在显示最常见的情况:非顺序ID。 问题答案: 每个解决方案都有其用例。

  • 问题内容: 我有一个称为状态的对象数组。 说我有功能 这里的问题是,每次调用时,整个数组都会更新,因此整个DOM都将重新呈现。在我的情况下,这导致浏览器冻结,因为我几乎每秒都要调用此函数,并且有很多对象。但是,在每次通话中,实际上仅更新其中一个或两个设备。 我有什么选择? 编辑 在我的确切情况下,a 是一个定义如下的对象: 因此,数组中的每个项目都是this的特定瞬间,即我所拥有的某个地方: 我更

  • 问题内容: 我想以jQuery或纯JavaScript的形式获取JavaScript对象的键作为数组。 有没有比这更详细的方法? 问题答案: 用途: 这是ES5的功能。这意味着它可以在所有现代浏览器中使用,但不能在旧版浏览器中使用。 ES5-shim有一个实现可以偷

  • 问题内容: 我有以下JSON数组,我想创建对象表单状态键计数 要计算状态键值并创建以下对象 问题答案: 使用 方法 虽然可以使用 具有相同代码的方法。