Как сравнить переменные состояния двух компонентов в реакции?

Question

У меня есть компонент, состояние которого содержит переменные, в которых хранится случайное значение 0-3, у меня есть 2 из них в моем app.js, теперь я хочу сравнить состояние этих 2 компонентов. пожалуйста, помогите.

это мой компонент.

import React from "react";

export default class player extends React.Component {
constructor(...args) {
super(...args);
this.state = {
  shoot: 0
};
}
shooter = () => {
this.setState({ shoot: Math.floor(Math.random() * Math.floor(3)) });
}

render() {
return (
  <div>
    <h1>{this.state.shoot}</h1>
    <button onClick={() => this.shooter()}>shoot it</button>
  </div>
);
}
}

это мой app.js

import React, { Component } from "react";
import logo from "./logo.svg";
import "./App.css";
import Player from "./player";

class App extends Component {
render() {
return (
  <div className="App">
    <div>
      <Player />
      <Player />
    </div>
  </div>
);
}
}

export default App;

Как я могу сравнить state.shoot в обоих <Player />? Я хочу проверить, равны ли оба state.shoot.

Answer 1

Я бы порекомендовал поставить состояние в компоненте приложения. таким образом у вас будет больше возможностей для данных, например:

Компонент приложения:

import React, { Component } from "react";
import logo from "./logo.svg";
import "./App.css";
import Player from "./player";

class App extends Component {
    constructor(...args) {
super(...aan rgs);
this.state = {
    // create array of all your players
        players : [{shoot :0}, {shoot :0}]
    }
}
shooter = (id) => {
let players = this.state.player
/// maping the new players array
players.map(element, index => {
    if(id == index){
        element.shoot = Math.floor(Math.random() * Math.floor(3)
    }
}
this.setState({players) });
}

checkPlayers = () =>{
    // this is example... you can loop over your array and find what you need
    if(this.state.players[0].shoot == this.state.players[1].shoot){
        return true
    }
    else{
        return false
    }
}

render() {
return (
  <div className="App">
    <div>
    {this.state.players.map(i => {
        // pass the values to the player component (don't forget the id)
        return <Player shoot={i.shoot} shooter={this.shooter} id={i}/>
    }
    </div>
  </div>
);
}
}

export default App;

Компонент плеера:

import React from "react";

export default class player extends React.Component {

setShooter = () => {
    this.props.shooter(this.props.id)
}

render() {
return (
  <div>
    <h1>{this.props.shoot}</h1>
    <button onClick={this.setShooter}</button>
  </div>
);
}
}

export default player;