Reactjs React JSX如何在计时器上的两个对象之间切换组件状态

使用两个对象切换组件状态时遇到问题

基本上我有一个屏幕，我想通过两个对象循环显示它们通过同一个组件。我是一个新手，所以我不确定如何完成这个任务

我一直在使用组件装载方法以及下面的代码setInterval（）

当前状态它从第一个对象更改为第二个对象，并继续通过计时器，但不会更改回第一个对象

import React, { Component } from 'react';
import ReactDOM from 'react-dom';



var pizzaMenu = {items: [
      {
        name: 'PEPPERONI & CHEESE',
        description: "cheese and peperoni",
        price: "$5.99 P / $9.49 M / $11.49 L / $14.49 XL"
     },
     {
       name: 'MARGARITA PIZZA',
       description: "Fresh basil, roma tomatoes, and balsamic glaze",
       price: "5.99 P / 10.99 M / 13.99 L / 15.99 XL"
     },
     {
       name: 'HAWAIIAN PIZZA',
       description: "Honey ham topped with pineapple",
       price: "5.99 P / 10.99 M / 13.99 L / 15.99 XL"
     },
     {
       name: 'WHITE PIZZA',
       description: "Spinach, onion, tomato and white garlic sauce",
       price: "5.99 P / 10.99 M / 13.99 L / 15.99 XL"
     },
     {
       name: 'HOT!! PEPPA HAM',
       description: "Mama Lil's hot peppas and spicy capicola ham",
       price: "5.99 P / 12.99 M / 14.99 L / 16.99 XL"
     },
     {
       name: 'SWEET PEPPER HAM',
       description: "Sweet peppadew peppers and honey baked ham",
       price: "5.99 P / 12.99 M / 14.99 L / 16.99 XL"
     },
     {
       name: 'SUPREME PIZZA',
       description: "Pepperoni, sausage, green peppers, mushrooms, onion, black olives",
       price: "5.99 P / 12.99 M / 14.99 L / 16.99 XL"
     },
     {
       name: 'MEAT LOVERS PIZZA',
       description: "Pepperoni, sausage, ham, bacon",
       price: "5.99 P / 12.99 M / 14.99 L / 16.99 XL"
     },
     {
       name: 'BBQ CHICKEN PIZZA',
       description: "BBQ Sauce, grilled chicken, bacon and onion",
       price: "5.99 P / 12.99 M / 14.99 L / 16.99 XL"
     }
     ]}

     var pizzaMenuTwo = {items: [
           {
             name: 'Test',
             description: "cheese and peperoni",
             price: "$5.99 P / $9.49 M / $11.49 L / $14.49 XL"
           }
          ]}



class Standard extends Component {
  constructor(props){
    super(props);
    this.state = pizzaMenu

  }



 componentWillMount() {
    console.log('ComponentWillLMount');

  }

  componentDidMount () {
    console.log('ComponentDidMount');
    setInterval(() => {
    this.switch();
  }, 2000);
  }

  shouldComponentUpdate() {
    console.log('ShouldComponentUpdate');
    return true;
  }

  componentWillUpdate() {
    console.log('Will Update');
  }

  componentDidUpdate(){
    console.log('ComponentDidUpdate');
  }



switch = () => {
  if(this.state !== pizzaMenuTwo){
  this.setState(pizzaMenuTwo);
}
else {
  this.setState(pizzaMenu);
}
}

  render() {
    console.log('ComponentRender');
    let items = this.state.items


      return (
        <div className="container-fluid p-5">
            {items.map(item  =>
              <div className="row p-3">
              <div className="text-justify text-capitalize" key={item.name.toString()}>
              <h2><span className="display-4">
                {item.name}
              </span></h2>
              <h4><span className="description">
                {item.description}
              </span></h4>
              <span className="">
                {item.price}
            </span>
            </div>
            </div>
          )}
        </div>
    )
  }
}


export default Standard;

import React，{Component}来自'React'；
从“react dom”导入react dom；
var pizzaMenu={项：[
{
名称：“意大利香肠和奶酪”，
描述：“奶酪和胡椒”，
价格：“$5.99 P/$9.49 M/$11.49 L/$14.49 XL”
},
{
名称：“玛格丽塔披萨”，
描述：“新鲜罗勒、罗马番茄和香脂釉”，
价格：“5.99 P/10.99 M/13.99 L/15.99 XL”
},
{
名称：“夏威夷比萨饼”，
描述：“加菠萝的蜂蜜火腿”，
价格：“5.99 P/10.99 M/13.99 L/15.99 XL”
},
{
名称：“白色披萨”，
描述：“菠菜、洋葱、西红柿和白蒜酱”，
价格：“5.99 P/10.99 M/13.99 L/15.99 XL”
},
{
名字：“热！！佩帕火腿”，
描述：“Lil妈妈的辣味peppas和辣味capicola火腿”，
价格：“5.99 P/12.99 M/14.99 L/16.99 XL”
},
{
名称：‘甜椒火腿’，
描述：“甜椒和蜂蜜烤火腿”，
价格：“5.99 P/12.99 M/14.99 L/16.99 XL”
},
{
名称：“至尊披萨”，
描述：“意大利香肠、香肠、青椒、蘑菇、洋葱、黑橄榄”，
价格：“5.99 P/12.99 M/14.99 L/16.99 XL”
},
{
名称：“肉食爱好者披萨”，
描述：“意大利香肠、香肠、火腿、培根”，
价格：“5.99 P/12.99 M/14.99 L/16.99 XL”
},
{
名称：“烧烤鸡肉披萨”，
描述：“烧烤酱、烤鸡、培根和洋葱”，
价格：“5.99 P/12.99 M/14.99 L/16.99 XL”
}
]}
var pizzamanutwo={项：[
{
名称：'测试'，
描述：“奶酪和胡椒”，
价格：“$5.99 P/$9.49 M/$11.49 L/$14.49 XL”
}
]}
类标准扩展了组件{
建造师（道具）{
超级（道具）；
this.state=比萨饼菜单
}
组件willmount（）{
log（'componentwillmount'）；
}
组件安装（）{
log（'ComponentDidMount'）；
设置间隔（（）=>{
这个.switch（）；
}, 2000);
}
shouldComponentUpdate（）{
log（'ShouldComponentUpdate'）；
返回true；
}
componentWillUpdate（）{
console.log（'Will Update'）；
}
componentDidUpdate（）{
log（'componentdiddupdate'）；
}
开关=（）=>{
if（this.state！==pizzaMenuTwo）{
这个.setState（pizzaMenuTwo）；
}
否则{
这个.setState（比萨饼菜单）；
}
}
render（）{
console.log（'ComponentRender'）；
让items=this.state.items
返回(
{items.map（item=>
{item.name}
{item.description}
{item.price}
)}
)
}
}
导出默认标准；

问题就在这里

switch = () => {
  if(this.state !== pizzaMenuTwo){
    this.setState(pizzaMenuTwo);
  }
  else {
    this.setState(pizzaMenu);
  }
}

this.state！==Pizzamanutwo

不会进行深度相等性检查，但是如果您设置项目状态并进行检查，它将起作用

switch = () => {
    if (this.state.items !== pizzaMenuTwo.items) {
      this.setState({items: pizzaMenuTwo.items});
    }
    else {
      this.setState(pizzaMenu);
    }
  }

---

为什么您希望状态返回到第一个对象？这是我的预期结果，我想通过使用切换功能，它会将状态设置为我选择的任何对象，就像我说的，我对反应相当陌生。