代码之家 › 专栏 › 技术社区 › MoKhajavi75

React Native set state对象数组的元素

ecmascript-6 react-native reactjs arrays javascript

MoKhajavi75 · 技术社区 · 8 年前

我的状态中有一个数组:

this.state = {
  data: [
    {
      quantity: 0
    }
  ],
  tempQuantity: 0
};

我想更新我的 data[0].quantity 在一个 TextInput 所以我用:

onChangeText={tempQuantity =>
  this.setState({
    tempQuantity,
    data: [...this.state.data, { quantity: tempQuantity }]
  })
}

我有一个 <Text> 显示结果:

<View>
  <Text>{this.state.data[0].quantity}</Text>
</View>

但我知道 0 每一次!

如何更新数组中每个对象的每个元素?
如果我这样使用它,它会动态工作吗?我的意思是每次按下 <Button> . [例如: data[0] 具有 quantity 共10页- data[1] with 数量12-和。。。]

2 回复 | 直到 8 年前

Tholle 8 年前

若要对数组中的每个元素使用单个事件处理程序,可以传入 index 以及 event 并更新 quantity 对于该特定索引上的元素。

例子

class App extends React.Component {
  state = {
    data: [
      {
        quantity: 0
      },
      {
        quantity: 10
      },
      {
        quantity: 100
      }
    ]
  };

  handleChange = (event, index) => {
    const { value } = event.target;

    this.setState(previousState => {
      const data = [...previousState.data];

      data[index] = {...data[index], quantity: value };

      return { data };
    });
  };

  render() {
    return (
      <div>
        {this.state.data.map((element, index) => (
          <div key={index}>
            <input
              type="number"
              value={element.quantity}
              onChange={event => this.handleChange(event, index)}
            />
          </div>
        ))}
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id="root"></div>

Sandip Nirmal 8 年前

你必须修改你的 data 将其设置为状态之前的数组。您可以按以下方式执行:

假设您有一个包含以下项的数组:

var data = [
{name: 'a', age: 12},
{name: 'b', age: 15}
]

在按以下方式再次设置为状态之前,需要对其进行修改:

var newData = data.map((item) => {
return {...item, age: 20}
})

现在你的 newData 将

var newData = [
{name: 'a', age: 20},
{name: 'b', age: 20}
]

这个 新数据 可以分配给 state .

推荐文章

Shibaji Biswas · 如何在Template literal的双引号内的html div id中编写JavaScript变量?

2 年前

GulgDev · 为什么不将属性设置为无效值?

2 年前

Koffee · 动画继续使用update()重新启动,而不是在Phaser 3中正常播放

2 年前

Monnt · 如何查看数组是否包括具有特定值的嵌套数组?

2 年前

JsCoder · 用ECDSA对C语言中的数据进行加密#

2 年前

dsi · 排序功能可实现多列的自定义差异

2 年前

huz3y · 如何在JavaScript中基于另一个变量值构建变量?如何重新分配它的值并对该变量执行方法?复制

2 年前

Darigan · clearTimeout将一个函数中的计时器与另一个函数(React.js)一起超时

2 年前

Joseph · 仅在React和JS中生成深色

2 年前

Joseph · 在Javascript中检索一些文本

2 年前