ReactJS - 在状态中切换两个列表

Question

>我在州里有两个列表：

this.state = {
  fisrtList: [],
  secondList: [],
}

我

想要的是切换这些列表，我的意思是：

const tmp = [];
tmp = fisrtList;
fisrtList = secondList;
secondList = tmp;

由于设置状态会导致渲染，因此这不起作用。它只是改变了其中之一。我使用了不同的方法，例如将tmp保持在该州，但它也没有奏效。

您对正确切换这两个列表有什么建议吗？

Answer 1

使用切换的引用设置新状态。由于我们正在更改引用，因此无需克隆它们。

注意：我正在使用 setState 的更新程序回调选项。

this.setState(({ fisrtList, secondList }) => ({
  fisrtList: secondList,
  secondList: fisrtList
}));

演示：

class App extends React.Component {
  constructor(props) {
    super(props);
    
    this.state = {
      fisrtList: [1, 2, 3],
      secondList: ['a', 'b', 'c']
    };
  }
 
  toggle = () => this.setState(({ fisrtList, secondList }) => ({
    fisrtList: secondList,
    secondList: fisrtList
  }));
  
  render() {
    const { fisrtList, secondList } = this.state;
    
    return (
      <div>
        <button onClick={this.toggle}>Toggle</button>
      
        <div>{fisrtList.join(',')}</div>
        
        <div>{secondList.join(',')}</div>
      </div>
    );
  }
}
ReactDOM.render(
  <App />,
  demo
);

<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="demo"></div>

Answer 2

创建一个如下所示的切换方法：

toggle = () => {
   this.setState({
       fisrtList: this.state.secondList,
       secondList: this.state.fisrtList
    });
}
render() {
   return <button onClick={this.toggle}>Toggle the lists</button>
}