Question

我对React很新，我正在尝试构建经典待办事项列表！但是，我正在努力追踪数组项目我正在创建如下项目：

     this.setState({item: {
      text: event.target.value,
      index: this.state.items.length++,
      completed:false
        }

我一直在添加这样的项目数组：

     this.setState({items:this.state.items.concat(this.state.item)});

但是这个方法每次都会创建一个新数组，所以我不能使用该项的索引。但是，当我尝试使用push添加到数组时，我似乎无法显示它！任何帮助将不胜感激！

Answer 1

我怀疑这里是在发出添加任务的事件时，您正尝试为item设置状态，然后您也会立即设置items状态。

React可以将多个setState（）调用批处理为单个更新以提高性能。“

请参阅docs。因此，当您尝试item

时，不应期望this.setState({items:this.state.items.concat(this.state.item)});拥有您的最新项目

您可以尝试以下

const item = [{
  text: event.target.value,
  index: this.state.items.length + 1,
  completed:false
 }]

let items = {this.state}
items = items.push(item)
this.setState({items})

您还可以将函数传递给setState方法

this.setState(function(prevState, props) {
   //Code goes here
});

Answer 2

按照定义，数组是不可变的数据。

要添加新项目而不会导致突变（并且为了更清洁起见），请使用包装immutability-helper。

安装在项目目录中

npm install不可变性帮助程序--save

...在类中导入

    $('#image').on('change',function(){
    var filePath = $(this).val(),
        fileFormat =  filePath.substring(filePath.lastIndexOf(".")).toLowerCase();
    if( !fileFormat.match(/.png|.jpg|.jpeg/) ) {
        error_prompt_alert('Upload error , file format should be：png/jpg/jpeg');
        return; 
    }
    $('#thumbnail-show').attr('src',filePath);

...并更新数组

import update from 'immutability-helper'

此代码对total_rating进行“克隆”，并使用$ splice在第0个索引处添加新的平均值。

在React中添加一个数组

2 个答案: