Question

我无法使用两个对象切换组件状态。

基本上我有一个屏幕，我想通过两个对象循环显示它们通过相同的组件。我的反应相当新，所以我不确定完成这个的正确方法。

我一直在使用组件挂载方法以及下面的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;

Answer 1

问题出在这里

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

this.state !== pizzaMenuTwo没有进行深度相等检查，但是如果你设置了状态并检查它，那么它将起作用

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

<强> Working codeSandbox

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

1 个答案: