Question

我正在做的是尝试从array1中删除一项，然后将其添加到array2。参见下面的代码：

 for(var i = 0; i < this.state.Array1.length; i++){

      if(this.state.Array1[i].Id === item.Id){

        var copiedArray1 = [...this.state.Array1];
        copiedArray1.splice(i, 1);
        var copiedArray2= [item, ...this.state.Array2]


        this.setState({
          Array1: copiedArray1,
          Array2: copiedArray2
        });


        console.log('state', this.state)
      }

  }

第一次不将项目添加到数组时保持为空第二个时间是添加到数组，但它不会更改视图。

有人知道如何解决这个问题吗？

Answer 1

您正在for循环中设置状态
还可以在for循环内迭代并创建yout复制数组

这会导致每次函数在for循环中运行时都会创建新数组并设置状态。将setstates和数组decles移到for循环之外，然后它将起作用

Answer 2

    const array1 = [1,2,3,4,5];
    let array2 = [];
    const id =4

    const found = array1.filter(item=> item === id);
    if(found && found[0]) {
      array2 = [...array2, found[0]]
    }
   this.setState({
      array2 
    })

es6干净代码。根据您的需要进行修改（也不要在循环中设置setState）

Answer 3

我做了一个小样本，您可以运行它并单击左侧数组（Array1）的项目，然后将其转移到第二个。

这是执行项目转移和更新状态的代码的关键部分：

const foundItem = this.state.Array1.find(arrayItem => arrayItem.Id === item.Id);
if (foundItem) {
  const copiedArray1 = this.state.Array1.filter(fItem => fItem.Id !== item.Id);
  const copiedArray2= [ foundItem, ...this.state.Array2];

  this.setState({
    Array1: copiedArray1,
    Array2: copiedArray2
  }, () => console.log('state', this.state));
}

我会用它代替for循环，因为我不喜欢从要迭代的同一数组中删除项目的想法。另外，我建议在for循环之外使用setState方法，该方法将被异步调用。

class Demo extends React.Component {
  state = {
    Array1: [ {Id: 1}, {Id: 11}, {Id: 12}, {Id: 13}, {Id: 14}, {Id: 15} ],
    Array2: [ {Id: 3} ]
  };
  
  handleClick = (item) => {
    const foundItem = this.state.Array1.find(arrayItem => arrayItem.Id === item.Id);
    if (foundItem) {
      const copiedArray1 = this.state.Array1.filter(fItem => fItem.Id !== item.Id);
      const copiedArray2= [ foundItem, ...this.state.Array2];
    
      this.setState({
        Array1: copiedArray1,
        Array2: copiedArray2
      }, () => console.log('state', this.state));
    }
  }

  render() {
    return (
      <div style={{display: 'flex' }}>
        <h1>Array1</h1>
        <ul style={{ marginRight: 50 }}>
        {this.state.Array1.map(item => <li key={`A1-${item.Id}`} onClick={() => this.handleClick(item)}>{item.Id}</li>)}
        </ul>

        <h1>Array2</h1>
        <ul>
        {this.state.Array2.map(item => <li key={`A2-${item.Id}`} onClick={() => this.handleClick(item)}>{item.Id}</li>)}
        </ul>
      </div>
    );
  }
}
ReactDOM.render(<Demo />, document.getElementById('demo'));

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

<div id="demo"></div>

React Native从1个数组中删除项目并设置在另一个数组中

3 个答案: