Question

我正在将数据从数据库加载到Reactjs表中。从中我想提取出Rowid并将其作为参数传递给handleEdit函数。

数据加载正常，表将使用正确的数据生成，包括RowID movie.movieID，但我无法将数据传递给该函数。

在许多语言中都很容易做，除了我在Reactjs中停留了两天。

无论我做什么，单击事件都会收到相同的错误“ TypeError：_this3.handleEdit不是函数”。

在ASP.net Core 2.2中使用reactjs

 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

React.js：this.handleEdit不是一个函数

1 个答案: