Я получаю Cannot GET / [object% 20Object] при нажатии кнопки в React

Question

Я новичок в React и изучаю события клика. Но проблема, с которой я столкнулся, заключается в том, что одним нажатием кнопки я получаю «Cannot GET / [object% 20Object]». Вот код, который я использую:

class Engine extends React.Component {
  render() {
    let types = ["Diesel", "Gazoline"];
    return (
      <div>
        <Car type={types} />
      </div>
    );
  }
}

class Car extends React.Component {
  open() {
    console.log("You have clicked");
  }
  render() {

    return (
      <div>
        <h1>
          {this.props.type.map((item, index) => {
            return <p key={index}>{item}</p>;
          })}
        </h1>
        <button onClick={open}>Remove all</button>
      </div>
    );
  }
}

const box = document.querySelector(".mir");

ReactDOM.render(<Engine />, box);

javascript reactjs

1

Dickens 19 Авг 2019 в 06:58

Answer 1

Вам нужно использовать this.open, поскольку он не знает точно, на что вы ссылаетесь open:

<button onClick={this.open}>Remove all</button>

Если бы вы назвали функцию, скажем, foo вместо open, то она бы вообще не работала.

Причина, по которой вы видите эту функциональность, заключается в том, что она использует команду open по умолчанию встроенный в JavaScript, который открывает новую страницу. Под капотом нажатие кнопки вызывает open(e), где e - событие кнопки. Поэтому он пытается открыть новую страницу, но вместо того, чтобы получить URL, он получает object, и, таким образом, вы видите полученную ошибку.

Вместо этого вы хотите использовать open, определенный в классе. Для этого вам нужно использовать this.open.

Кроме того, если вы хотите передать что-то в функцию в качестве аргумента, вам нужно немного его изменить.

Вы можете изменить open на:

open = (myparam) => {
    console.log("You have clicked");
    console.log(myparam);
}

Чтобы связать this. Тогда вы можете сделать что-то вроде:

<button onClick={_ => this.open("foo")}>Remove all</button>

2

rb612 19 Авг 2019 в 06:42

Answer 2

Вам необходимо привязать функцию open к компоненту, а также вызвать ее с помощью this. Или вы можете сделать функцию стрелки.

<button onClick={this.open.bind(this)}

Или

open = () => { ... }
<button onClick={this.open}

1

jeremy 19 Авг 2019 в 04:10

Я получаю Cannot GET / [object% 20Object] при нажатии кнопки в React

2 ответа

Похожие вопросы

Связанные вопросы

Новые вопросы

javascript