Rendring T Привет мир с кнопкой напитка и прощай мир с кнопкой еды

Question

// Привет, проблема, когда я щелкаю пить, это утешает.

class Item extends React.Component {

  constructor()  {
    super();
    this.state = {
    Card1: 0
  } ;
  this.state = {
    Card2: 0
  };
}
  handleClick = (button) => {
   this.setState({ Card1: button })
  };
handel = (event) => {
  this.setState({ Card2: event })
}

  render() {
    return (
      <div>

 <button onClick={() => this.handleClick(1)}>drink</button>
 <button onClick={() => this.handel(1)}>food </button>
 <div>
{this.state.handel ? console.log("goodbye world") : console.log("null")}
{this.state.handleClick  ? console.log('hello world') : console.log("null")}
</div>

      </div>
    );
  }
}

export default Item;

Answer 1

добро пожаловать в стек переполнения. Всего несколько фундаментальных ошибок.

В конструкторе должна быть только 1 переменная состояния.

this.state = {
Card1: 0,
Card2: 0,
};

При рендеринге вы должны проверять переменную состояния и затем печатать на консоль. Вы - строка для проверки чего-то неопределенного.

{this.state.Card2 ? console.log("goodbye world") : console.log("null")}
{this.state.Card1 ? console.log('hello world') : console.log("null")} 

дайте мне знать, если это имеет смысл для вас.

Answer 2

В вашем коде много проблем.

В вашем коде состояние инициализации неверно, что за пределами конструктор. Вам не нужно объявлять инициализацию состояния два раза в один компонент.

Неправильные обработчики событий.

вы устанавливаете состояние для card1 и card2, но вы проверяете обработчик неправильная функция this.state.handle.

Играйте с булевыми значениями, используя 0 и 1. В вашем случае.

имеет значение полные имена для состояния и функции обработчика согласно кнопкам

Вы должны сделать что-то вроде ниже.

class Item extends React.Component {

  constructor()  {
    super();
    this.state = {
       drink: false,
       food: false
    } ;
  }
  handleDrink = () => {
   this.setState({ drink: true, food: false })
  };
  handleFood = () => {
     this.setState({ food: true, drink: false })
  }

  render() {
    const { drink, food } = this.state;
    return (
      <div>
         <button onClick={() => this.handleDrink()}>drink</button>
         <button onClick={() => this.handleFood()}>food </button>
         <div>
            {drink && console.log("goodbye world")}
            {food  && console.log('hello world')}
         </div>
      </div>
    );
  }
}

export default Item;