Yakalanmayan TypeError: tanımsız malı 'setstate' okunamıyor

Question

Yakalanmayan TypeError: tanımsız malı 'setstate' okunamıyor

oy

0

Bütün is mükemmel derler, basit bir web paketi ile uygulama tepki işlemek çalışıyordum. Çalışma zamanı kodu aşağıdaki stacktrace başarısız:

Uncaught TypeError: Cannot read property 'setState' of undefined
at checkBoxCheck (App.js:174)...

İşte setstate ile kodudur:

//App.js
export class Login extends Component {
  constructor(props) {
    super(props);
    this.state = { remember: false };
  }

  checkBoxCheck(event) {
    this.setState({
      remember: !this.state.remember
    });
    console.log(this.state.remember);
  }

  render() {
    let msg = this.state.remember ? checked : uncheked;
    return (
      <form method=post>
        <h1>{msg}</h1>
        <label htmlFor=login>Login: </label>
        <input type=text name=login />
        <label htmlFor=pass> Password: </label>
        <input type=password name=pass />
        <label htmlFor=remember>Remeber me: </label>
        <input
          type=checkbox
          name=remember
          defaultChecked={this.state.remember}
          onChange={this.checkBoxCheck}
        />
      </form>
    );
  }
}

Nerede sözdizimi konudur?

Ayrıca ben bir checkBoxCheck 'ok' işlevini yapmaya çalışıyorduk, hataları derleme o neden:

    checkBoxCheck = event => {
    this.setState((prevState, props) =>({
        remember: !prevState.remember
    }));
    console.log(this.state.remember);
}

//output        
SyntaxError: D:/Projects/Learning-projects/learn-react/src/App.js: Unexpected token (53:18)

  51 |     }
  52 |
> 53 |     checkBoxCheck = event => {
     |                   ^
  54 |         this.setState((prevState, props) =>({
  55 |             remember: !prevState.remember
  56 |         }));

javascript reactjs webpack

Oluştur 09/07/2018 saat 21:29
kullanıcı j.doe

Diğer dillerde...

2 cevaplar

oy

1

Bağlı kılmak gerekir, çünkü bu oluyor this.checkBoxCheckiçin this.

Bu ekleyin: this.checkBoxCheck = this.checkBoxCheck.bind(this)sizin kurucusuna.

Örnek:

//App.js
export class Login extends Component {
  constructor(props) {
    super(props);
    this.state = { remember: false };

    this.checkBoxCheck = this.checkBoxCheck.bind(this);
  }

  checkBoxCheck(event) {
    this.setState({
      remember: !this.state.remember
    });
    console.log(this.state.remember);
  }

  render() {
    let msg = this.state.remember ? "checked" : "uncheked";
    return (
      <form method="post">
        <h1>{msg}</h1>
        <label htmlFor="login">Login: </label>
        <input type="text" name="login" />
        <label htmlFor="pass"> Password: </label> 
        <input type="password" name="pass" />
        <label htmlFor="remember">Remeber me: </label>
        <input
          type="checkbox"
          name="remember"
          defaultChecked={this.state.remember}
          onChange={this.checkBoxCheck}
        />
      </form>
    );
  }
}

Cevap 09/07/2018 saat 21:41
kaynak kullanıcı NorianNyx

Roman Mahotskyi · Accepted Answer · 2018-07-09 22:20

Aslında checkBoxCheck yöntemine bağlamı bağlamak unuttum.

...
<input
   type="checkbox"
   name="remember"
   defaultChecked={this.state.remember}
   onChange={this.checkBoxCheck.bind(this)} // <- .bind(this)
/>
...

İpuçları:

küçük sözler vardır kodunuzu ilgili:

Bağlam bağlama etmeyin renderyöntemle.
Kullanmayın this.statebir dahilinde this.setStatefonksiyonu

Hiçbir zaman `.bind()`içinde`render`

render() { // <- If you here
  ...
  <input
    ...
    onChange={this.checkBoxCheck.bind(this)} // <- don't do this
  />
  ...
}

Bu gibi olay işleyicileri bağlayıcı ederek, bileşenin hale aramaları tepki yepyeni fonksiyonları her zaman yaratmak. Bunun yerine, ok fonksiyonu içine fonksiyon dönüştürebilirsiniz:

checkBoxCheck = event => {
  this.setState({
    remember: !this.state.remember
  });
  console.log(this.state.remember);
}

ve bunun gibi diyoruz:

...
<input
   type="checkbox"
   name="remember"
   defaultChecked={this.state.remember}
   onChange={this.checkBoxCheck} // <- there is no binding
/>
...

Ayrıca, sınıf yapıcısının içinde tüm yöntemleri bağlayabilir:

//App.js
export class Login extends Component {
  constructor(props) {
    super(props);
    this.state = { remember: false };

    this.checkBoxCheck = this.checkBoxCheck.bind(this); // <- Bind your methods here
  }
...

ve bağlayıcı olmadan işlevini çağırır:

...
<input
   type="checkbox"
   name="remember"
   defaultChecked={this.state.remember}
   onChange={this.checkBoxCheck} // <- there is no binding
/>
...

Kullanılması `this.state`Bir dahilinde`this.setState`

Bir örnek bir artış fonksiyonu olabilir:

function increment() {
  this.setState({value: this.state.value + 1});
}

Bu iki setState operasyonlar toplu bir arada gruplandırılmış ise o değeri 1 olduğu göz önüne alındığında, aşağıdaki gibi bir şey olacaktır:

setState({value: 1 + 1})
setState({value: 1 + 1})

Bu ilk argüman olarak önceki durumuna alır geri aramalar kullanarak önlenebilir:

function increment() {
  this.setState(prevState => ({value: prevState.value + 1}));
}

Sonra işler gruplar halinde gerçekleşmesi bile, doğru ve güncel durumuyla argüman arayacak tepki. Ve Yukarıdaki örnek gibi bir şey olacaktır:

setState({value: 1 + 1})
setState({value: 2 + 1})

refs:

Yakalanmayan TypeError: tanımsız malı 'setstate' okunamıyor

İpuçları:

Hiçbir zaman .bind()içinderender

Kullanılması this.stateBir dahilindethis.setState

Hiçbir zaman `.bind()`içinde`render`

Kullanılması `this.state`Bir dahilinde`this.setState`