Попытка получить доступ к "this.state" во вкладке Chrome Sources.Я получаю неопределенным

Question

Я новичок в React.В настоящее время я изучаю реакцию с видео на YouTube под названием "The Net Ninja" "Complete React Tutorial (& Redux)".в учебнике ничего не сказано об отладке в chrome (пока).У меня была ошибка (тот же ключ для 2 дочерних элементов) с добавлением нового компонента пользовательского интерфейса в список тех же компонентов.Теперь я использую функцию стрелки, чтобы автоматически связать «это».пока в отладчике chrome я не могу смотреть "this.state" потому что "this" не определено.реальная ошибка заключается в том, что в строке кода, например "if (this.state.id)", это всегда ложно, потому что "this" не определено.но если я сделаю строку кода, такую ​​как «let a = this.state», я могу посмотреть «a» со всеми данными, которые имеет «this.state».ей немного моего кода и несколько фотографий из отладчика.

App.js

import React, { Component } from 'react';
import Ninjas from './Ninjas';
import AddNinja from './AddNinja';

class App extends Component {
  state = {
    ninjas: [
      { name: 'Ryu', age: 30, belt: 'black', id: 1 },
      { name: 'Yoshi', age: 20, belt: 'green', id: 2 },
      { name: 'Crystal', age: 25, belt: 'blue', id: 3 }
    ]
  }

  addNinja = (ninja) => {
    ninja.id = Math.random();
    let ninjas = [...this.state.ninjas, ninja];
    this.setState({
      ninjas: ninjas
    })
  }

  deleteNinjs = (id) => {   
    let ninjas =  this.state.ninjas.filter(ninja => ninja.id !== id)
    this.setState({
      ninjas: ninjas
    })
  }

  render() {
    return (
      <div className="App">
        <h1>My first React app!</h1>
        <p>Welcome :)</p>
        <Ninjas deleteNinjs={this.deleteNinjs} ninjas={this.state.ninjas} />
        {/*passing the func to bind the data from the child component*/}
        <AddNinja addNinja={this.addNinja} />
      </div>
    );
  }
}

export default App;

Ninja.js

import React from 'react';

const Ninjas = ({ ninjas, deleteNinjs }) => {   

    const ninjaList = ninjas.map(ninja => {
        return ninja.age > 20 ? (
            <div className="ninja" key={ninja.id}>
                <div>Name: {ninja.name}</div>
                <div> Age: {ninja.age}</div>
                <div>Belt: {ninja.belt}</div>                                          
                <button onClick={() => { deleteNinjs(ninja.id) }} >Delete ninja</button>
            </div>
        ) : null;
    });   

    return (
        <div className="ninja-list">
            {ninjaList}
        </div>                  
    )
}

export default Ninjas

AddNinja.js

import React, { Component } from 'react';

class AddNinja extends Component {

state = {
    name: null,
    age: null,
    belt: null
}

hendleChange = (e) => {
    this.setState({
        [e.target.id]: e.target.value
    })
}

hendleSubmit = (e) => {       
    debugger
//this is my testing to see if the state exists
    console.log(this.state)
//
// this is what will fix the bug of 2 childs with same key
    if (this.state.id)
        this.setState({
            id: null
        })
//
    e.preventDefault();
    this.props.addNinja(this.state);
}

render() {
    return (
        <div>
            <form onSubmit={this.hendleSubmit}>
                <label htmlFor="name">Name:</label>
                <input type="text" id="name" onChange={this.hendleChange} />
                <label htmlFor="age">Age:</label>
                <input type="text" id="age" onChange={this.hendleChange} />
                <label htmlFor="belt">Belt:</label>
                <input type="text" id="belt" onChange={this.hendleChange} />
                <button>Submit</button>
            </form>
        </div>
    )
}
}

export default AddNinja

Теперь я могу облегчить себе жизнь и связать все функции в HTML с этим.и тогда я вижу в отладчике "this.state".но я не понимаю, почему консоль печатает это не как неопределенное, а как есть.и «если» не работает, когда я пытаюсь получить доступ к идентификатору в состоянии.ее образ проблемы образ отладчика в хроме

Answer 1

Я задавал тот же вопрос здесь:

Chrome, Firefox отладчики не отображают правильное значение 'this' в приложении реагирования

В основном проблемав том, что когда вы определяете функцию стрелки переменной класса - (т.е. hendleSubmit = () =>), это на самом деле не является допустимым JavaScript - и на самом деле работает плагин babel transform-class-property *, который работает, и привязкаэти функции для экземпляра класса.

Насколько я понимаю, когда chrome просматривает исходные карты, чтобы связать их с вашим написанным кодом, он не видит этой привязки.

Единственное известное мне решение - это вручную связать функции вашего класса следующим образом:

  constructor() {
    super();
    this.click2 = this.click2.bind(this);
  }

  click2() {
    console.log(this, "hello");
    let x = 1 + 1;
  }

Answer 2

this не обязательно this в переданном коде.В этом случае, скорее всего, это что-то вроде временной переменной _this, имитирующей лексическое поведение this в функциях со стрелками.

Проверка переменных в области действия текущей функции в точке останова вместо использования функции наблюдения.

См. Также это объяснение для справки.