Reactjs: this.handleEdit не является функцией

Question

Я загружаю данные из БД в таблицу Reactjs.Из этого я хочу извлечь Rowid и передать его в качестве параметра функции handleEdit.

Загрузка данных в порядке, таблица генерирует правильные данные, включая RowID movies.movieID, но я не могу передать данные в функцию.

Очень легко сделать на многих языках, кромеЯ застрял на этом в течение 2 дней в Reactjs.

Независимо от того, что я делаю, я получаю ту же ошибку «TypeError: _this3.handleEdit не является функцией» в событии click.

Использованиеactjs в ядре ASP.net 2.2

 this.handleEdit = this.handleEdit.bind(this);

handleEdit(id) {
    alert.show("Movie ID = " + id);
    console.log('Click happened');
}

static renderMoviesTable(allmovies) {
    return (
        <Table className="table table-striped"><thead>
            <tr><th></th>
                <th>ID</th>
                <th>Title</th>
                <th>Year</th>
                <th>Plot</th>
                <th>Genre</th>
            </tr></thead><tbody>
                {allmovies.map(movies =>
                    <tr key={movies.movieID}>
                        <td><Button onClick={() => this.handleEdit(this, movies.movieID)} className="btn-info">Edit</Button></td>
                        <td>{movies.movieID}</td>
                        <td>{movies.title}</td>
                        <td>{movies.year}</td>
                        <td>{movies.plot}</td>
                        <td>{movies.genre}</td>
                    </tr>
                )};
            </tbody>
        </Table>
    );

Вот весь класс с ненужными вещами

import React, { Component } from "react";
import { Button } from "reactstrap";
import { Table } from "reactstrap";

export class FetchMovies extends Component {
static displayName = FetchMovies.name;

constructor(props) {
    super(props);
    this.state = {
        allmovies: [],
        editMovie: [],
        selectedMovieID: "",
        title: "",
        year: "",
        plot: "",
        genre: "",
        isEditForm: false, //bool to check if you are editing
        loading: true
    };
       this.handleEdit = this.handleEdit.bind(this);

    fetch('api/Movies')
        .then(response => response.json())
        .then(data => {
            this.setState({ allmovies: data, loading: false });
        });
}

handleEdit(id) {
    alert.show("Movie ID = " + id);
    console.log('Click happened');
}

static renderMoviesTable(allmovies) {
    return (
        <Table className="table table-striped"><thead>
            <tr><th></th>
                <th>ID</th>
                <th>Title</th>
                <th>Year</th>
                <th>Plot</th>
                <th>Genre</th>
            </tr></thead><tbody>
                {allmovies.map(movies =>
                    <tr key={movies.movieID}>
                        <td><Button value={movies.movieID} onClick={() => this.handleEdit(movies.movieID)} className="btn-info">Edit</Button></td>
                        <td>{movies.movieID}</td>
                        <td>{movies.title}</td>
                        <td>{movies.year}</td>
                        <td>{movies.plot}</td>
                        <td>{movies.genre}</td>
                    </tr>
                )};
            </tbody>
        </Table>
    );
}


render() {
    let movieContents = this.state.loading
        ? <p><em>Loading Movies...</em></p>
        : FetchMovies.renderMoviesTable(this.state.allmovies);

     const { isUser, addClicked, isEditForm, helper } = this.state;
    return (
        <div>
            <h1>All Movies</h1>
            {!isEditForm && movieContents}
        </div>
    );
}

}

Answer 1

Я вижу это!

Это потому, что вы объявили метод renderMoviesTable как static метод. Удалите ключевое слово static из этого метода, и это должно сработать, а затем вызовите функцию через this.renderMoviesTable вместо

Статический метод не получает доступ к this, как вы думаете, они будут: https://medium.com/@yyang0903/static-objects-static-methods-in-es6-1c026dbb8bb1