如何用一个按钮在两个数组列表之间切换反应js

Question

寻找有关如何使用一个按钮的建议，当单击该按钮时，该按钮会将项目列表切换为按字母顺序排列的项目列表，并在再次单击时返回等等。截至目前，当我单击按钮时，它将显示按字母顺序排列的列表，但它只是呈现在已显示的原始列表之上。不太确定从这里去哪里

class MenuItems extends Component {

    state = {
        sortedItems: []
    }

    handleclick = (item) => {
        this.props.deleteMenuItem(item.id);
    }

    menuSort = () => {
         const ogList = [...this.props.menuItems]
        let sortedList = ogList.sort((a, b) => a.name.localeCompare(b.name));
        this.setState({sortedItems: sortedList})
    };

    render(){
        return ( 
            <div>
                <button onClick={this.menuSort}>filter a to z</button>

                {this.state.sortedItems.map((item) =>(
                    <li class="list" key={item.id}>
                        {item.name}
                        <br></br>
                        {item.body}
                        <br></br>
                        <img src={item.image}></img>
                        <br></br>
                        <button id={item.id} onClick={() => this.handleclick(item)}>delete </button>
                    </li>
                ))}

                
                {this.props.menuItems.map((item) =>(
                    <li class="list" key={item.id}>
                        {item.name}
                        <br></br>
                        {item.body}
                        <br></br>
                        <img src={item.image}></img>
                        <br></br>
                        <button id={item.id} onClick={() => this.handleclick(item)}>delete </button>
                    </li>
                ))}

            </div>
        )
    }
}

export default connect(null, {deleteMenuItem})(MenuItems)```

Answer 1

您正确地认为将排序后的版本保持在状态。但是您必须以某种方式指示组件呈现原始列表或排序的列表。

所以你可以在state 中添加一个标志来指定你想要的那个。

您还可以在 componentDidMount 生命周期事件中设置排序列表，并在 menuItems 通过 componentDidUpdate 生命周期事件更改时更新它。

类似

  state = {
    sortedItems: [],
    showSorted: false
  };

  toggleSort = () => {
    this.setState(({ showSorted }) => ({
      showSorted: !showSorted
    }));
  };

  updateSortedItems() {
    const sorted = [...this.props.menuItems].sort((a, b) =>
      a.name.localeCompare(b.name)
    );
    this.setState({
      sortedItems: sorted
    });
  }

  componentDidMount() {
    this.updateSortedItems();
  }
  componentDidUpdate(prevProps) {
    if (this.props.menuItems !== prevProps.menuItems) {
      this.updateSortedItems();
    }
  }

在你的渲染方法中

let itemsToShow = this.props.menuItems;

if (this.state.showSorted) {
  itemsToShow = this.state.sortedItems;
}

当你想显示它们时使用itemsToShow

{itemsToShow.map((item) => (

https://codesandbox.io/s/elated-heyrovsky-m3jvv 上的完整工作示例

Answer 2

第一个渲染状态将是存储道具值，然后当我们单击切换按钮时，只对数组进行排序。我们可以通过切换状态来检查排序与否。像这样的最终代码

class MenuItems extends Component {

    state = {
        sortedItems: this.props.menuItems.sort((a, b) => a.name.localeCompare(b.name)),
        toggle:false,
    }

    handleclick = (item) => {
        this.props.deleteMenuItem(item.id);
    }

    menuSort = () => {
         const ogList = [...this.props.menuItems]
        let sortedList = ogList.sort((a, b) => a.name.localeCompare(b.name));
        this.setState({sortedItems: sortedList})
    };

    render(){
        return ( 
            <div>
                <button onClick={()=>{
                if(this.state.toggle==false){
                 this.setState({toggle: ture})
                 this.menuSort();
                }
                else{
                  this.setState({toggle: false})
                   this.setState({sortedItems:  this.props.menuItems})
                }
          }>filter a to z</button>

                {this.state.sortedItems.map((item) =>(
                    <li class="list" key={item.id}>
                        {item.name}
                        <br></br>
                        {item.body}
                        <br></br>
                        <img src={item.image}></img>
                        <br></br>
                        <button id={item.id} onClick={() => this.handleclick(item)}>delete </button>
                    </li>
                ))}

                
                {this.state.sortedItems.map((item) =>(
                    <li class="list" key={item.id}>
                        {item.name}
                        <br></br>
                        {item.body}
                        <br></br>
                        <img src={item.image}></img>
                        <br></br>
                        <button id={item.id} onClick={() => this.handleclick(item)}>delete </button>
                    </li>
                ))}

            </div>
        )
    }
}

export default connect(null, {deleteMenuItem})(MenuItems)