Блог

Новичок в React:

Ошибка Не удается прочитать свойство «значение» неопределенного

Это происходит после того, как я нажимаю на один из компонентов ячейки. Я хочу распечатать this.tl.state.value на консоль.

Родительский компонент

 class App extends Component {
  constructor(props) {
    super(props);
    this.tl = React.createRef();
  }

  checkForWinner = () => {
    console.log("Checking for winner..."   this.tl.state.value);
  }
  
  render() {
    return (
      <div className="App">
        <Cell ref={this.tl} winnercheck={this.checkForWinner} />
      </div>
    );
  }
}
 

Дочерний компонент

 class Cell extends Component {
    constructor(props) {
        super(props);
        this.state = {
            value: "X"
        }
    }

    toggleVal = () => {

        this.props.winnercheck();
    }
    
    render() {
        return (
            <div onClick={() => this.toggleVal()}>
                {this.state.value}
            </div>
        );
    }
}
 

Чтобы получить доступ к значению ссылки, вам необходимо использовать ref.current . В вашем случае это было this.tl.current бы так. Для получения дополнительной информации ознакомьтесь с документацией.