Question

我有一个视图，显示一个包含来自本地wamp数据库的数据行的表。每行都有一个View，Edit和Delete按钮，允许用户分别查看，编辑和删除记录。

单击行的“删除”按钮将显示确认模式，并在单击模式的“删除”按钮时删除。

现在，点击“删除”按钮会抛出这些错误：

警告：setState（...）：您传递了一个undefined或null状态对象;相反，使用forceUpdate（）。未捕获的TypeError：this.setState（...）不是函数

我在尝试绑定变量时也会收到警告：

警告：bind（）：React组件方法只能绑定到组件实例。见GamePlatformTable

我尝试使用forceUpdate取代setState来自我一直在搜索的内容，但我得到了相同的第二个错误。如果它有帮助，我使用 php，CodeIgniter 3.0.3 和原生React 0.14.3 。我对React还是比较陌生的，谢谢你的帮助。

这是我的代码：

查看：

<?php defined('BASEPATH') OR exit('No direct script access allowed'); ?>
<!DOCTYPE html>
<html lang="en">
<head>
    <?php
    $this->load->view("templates/meta_common");
    $this->load->view("templates/css_common");
    ?>

    <title>Video Game Portal Admin</title>
</head>

<body>

<div class="container">
    <?php $this->load->view("admin/admin_navbar"); ?>

    <div class="page-header">
        <h1>
            <i class="text-info fa fa-file-text-o"></i> Browse Game Platforms&nbsp;
            <span class="badge">REACT JS</span>
            <button onclick="window.location.replace('<?= site_url("admin/game_platform/add_game_platform/") ?>')" type="button"
                    class="btn btn-danger"><i class="fa
            fa-plus"></i> Add Game Platform
            </button>
        </h1>
    </div>

    <?php $this->load->view("admin/template_user_message"); ?>

    <div id="GamePlatformTable">
    </div>

    <?php $this->load->view("admin/admin_footer"); ?>
</div>

<?php $this->load->view("templates/js_common"); ?>

<script src="<?=RESOURCES_FOLDER?>js/react.js"></script>
<script src="<?=RESOURCES_FOLDER?>js/react-dom.js"></script>
<script src="<?=RESOURCES_FOLDER?>js/JSXTransformer.js"></script>
<script src="<?=RESOURCES_FOLDER?>jsx/BrowseGamePlatform.js" type="text/jsx;harmony=true"></script>

<script type="text/jsx">
var gamePlatforms = <?=json_encode($game_platforms)?>;

ReactDOM.render(
    <GamePlatformTable
        gamePlatforms = {gamePlatforms}
        siteUrl = "<?=site_url()?>"
    />,
    document.getElementById("GamePlatformTable")
);
</script>

外部反应：

错误发生在 GamePlatformTable 的 deleteButtonClicked 函数中。

var rowIndex = 0;

var GamePlatformRow = React.createClass({

    render: function () {
        ++rowIndex;

        var developer = !this.props.gamePlatform.developer || this.props.gamePlatform.developer == "none" ?
            <span className="text-placeholder">none</span> : this.props.gamePlatform.developer;

        var year_intro = !this.props.gamePlatform.year_intro || this.props.gamePlatform.year_intro == "0" ?
            <span className="text-placeholder">0</span> : this.props.gamePlatform.year_intro;

        var logo_img = this.props.gamePlatform.logo_url ?
            <img className="img-rounded" src={this.props.siteUrl + "/uploads/" + this.props.gamePlatform.logo_url}
                 alt={this.props.gamePlatform.abbr} width="50px" height="50px"/> :
            <span className="text-placeholder">no logo</span>;

        var view_action = <a
            href={this.props.siteUrl + "/admin/game_platform/view_game_platform/" + this.props.gamePlatform.platform_id}
            type="button" className="btn btn-default"><i className="fa fa-eye"></i> View</a>;

        var edit_action = <a
            href={this.props.siteUrl + "/admin/game_platform/view_game_platform/" + this.props.gamePlatform.platform_id}
            type="button" className="btn btn-default"><i className="fa fa-file-text-o"></i> Edit</a>;

        return (
            <tr>
                <td>{rowIndex}</td>
                <td>{this.props.gamePlatform.platform_name}</td>
                <td><span className="badge">{this.props.gamePlatform.abbr}</span></td>
                <td>{logo_img}</td>
                <td>{developer}</td>
                <td>{year_intro}</td>
                <td>
                    {view_action}&nbsp;
                    {edit_action}&nbsp;
                    <button type="button" className="btn btn-default"
                            onClick={this.props.deleteButtonClicked.bind(this, this.props.gamePlatform.platform_id)}><i
                        className="fa fa-trash"></i> Delete
                    </button>
                </td>
            </tr>
        );
    }
}); //end GamePlatformRow

var GamePlatformTable = React.createClass({

    getInitalState: function () {
        return {
            gamePlatforms: this.props.gamePlatforms,
            deletePlatformId: null
        };
    },

    refreshTableData: function () {
        var data = {
            "gamePlatforms": this.props.gamePlatforms
        };

        $.ajax({
            url: this.props.siteUrl + "game_platform/json_get_all_platforms",
            dataType: "json",
            data: data,
            cache: false,
            success: function (data) {
                this.setState({gamePlatforms: data.gamePlatforms});
            }.bind(this),
            error: function (xhr, status, err) {
                console.error(this.props.siteUrl + "game_platform/json_get_by_platform_id", status, err.toString());
            }.bind(this)
        });
    },

    confirmDeleteClicked: function () {
        var data = {
            "platform_id": this.state.deletePlatformId
        }

        $.ajax({
            type: "POST",
            url: this.props.siteUrl + "game_platform/json_delete_by_platform_id",
            dataType: "json",
            data: data,
            success: function (data) {
                this.refreshTableData();
            }.bind(this),
            error: function (xhr, status, err) {
                this.refreshTableData();
            }.bind(this)
        });
    },

    deleteButtonClicked: function (platform_id) {
        console.log("GamePlatformTable.deleteButtonClicked\nplatform_id: " + platform_id);
        $("#ConfirmDeleteModal").modal("show");
        this.setState()({
            deletePlatformId: platform_id
        }).bind(this);
    },

    render: function () {
        var rows = [];
        this.props.gamePlatforms.forEach(
            function (gamePlatform) {
                rows.push(<GamePlatformRow gamePlatform={gamePlatform} key={gamePlatform.platform_id}
                                           siteUrl={this.props.siteUrl}
                                           deleteButtonClicked={this.deleteButtonClicked}/>);
            }.bind(this)
        );

        return (
            <div className="table-responsive">
                <table className="table table-hover" id="GamePlatformTable">
                    <thead>
                    <tr>
                        <th>#</th>
                        <th>Platform Name</th>
                        <th>Platform Abbr</th>
                        <th>Platform Logo</th>
                        <th>Platform Developer</th>
                        <th>First Release Year</th>
                        <th>&nbsp;</th>
                    </tr>
                    </thead>

                    <tbody>{rows}</tbody>
                </table>

                <div className="modal fade" id="ConfirmDeleteModal">
                    <div className="modal-dialog">
                        <div className="modal-content">
                            <div className="modal-header">
                                <button type="button" className="close" data-dismiss="modal" aria-label="Close"><span
                                    aria-hidden="true">&times;</span></button>
                                <h4 className="modal-title">Delete Game Platform</h4>
                            </div>
                            <div className="modal-body">
                                <p>Are you sure?</p>

                                <p>This action <strong className="text-danger">cannot</strong> be undone.</p>
                            </div>
                            <div className="modal-footer">
                                <button type="button" onclick={this.confirmDeleteClicked} className="btn btn-danger"
                                        data-dismiss="modal"><i className="fa fa-trash"></i> Delete
                                </button>
                                <button type="button" className="btn btn-default" data-dismiss="modal"><i
                                    className="fa fa-ban"></i> Cancel
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        );
    }
}); // end GamePlatformTable

修改1：

删除.bind(this)删除绑定警告。

编辑2：

我忘记添加，console.logs()显示正确的ID。

Answer 1

呃，我解决了问题。

我在setState前面有括号....就像setState()({})而不是setState({})。

React - “setState”不是函数

1 个答案: