Реагировать — & quot; setState & quot; это не функция

Question

Реагировать — & quot; setState & quot; это не функция

У меня есть представление, которое показывает таблицу со строками данных из локальной базы данных Wamp. В каждой строке есть кнопки «Просмотр», «Редактировать» и «Удалить», которые позволяют пользователю просматривать, редактировать и удалять записи соответственно.

Нажатие на кнопку Удалить строки вызовет модальное подтверждение и удаляется при нажатии кнопки Удалить модальное.

Прямо сейчас, нажатие на кнопку Удалить выдает следующие ошибки:

Предупреждение: setState (…): вы передали неопределенный или нулевой объект состояния; вместо этого используйте forceUpdate ().
Uncaught TypeError: this.setState (…) не является функцией

Я также получаю предупреждение при попытке связать переменную:

Предупреждение: bind (): методы компонента React могут быть связаны только с экземпляром компонента. Смотрите GamePlatformTable

Я пытался использовать forceUpdate на месте setState из вещей, которые я искал, но я получаю те же 2-е ошибки. Если это поможет, я использую PHP, CodeIgniter 3.0.3 а также нативный Реакт 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>

Внешний Реакция:

Ошибка возникает в deleteButtonClicked функция GamePlatformTable.

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() показывают правильные идентификаторы.

1

codeigniter jquery php react-jsx react-native

Решение

Другие решения

Других решений пока нет …

Источник

Accepted Answer

Эх, я решил проблему.

У меня была скобка перед setState…. лайк setState()({}) вместо setState({}),

1