2

做一个 React 项目并不断遇到类似的问题。在单击时使用 setState 使变量进入状态时遇到问题。在这种情况下，当单击相应的按钮时，我无法将我的播放器对象传递为 ActivePlayer 状态。但是，我可以将其设置为变量，但在应用程序的其他情况下，我需要将其设置为状态，这似乎是最直接的示例。

import React, { PropTypes } from 'react';
import { connect } from 'react-redux';
import { Link } from 'react-router';
import AdminSubNav from 'components/admin-subnav';
import { getPlayers } from 'api/index.js';
import { archivePlayer } from 'api/index.js';
let players = [];
let activePlayer = {};

export default class PlayerView extends React.Component {
    constructor(props) {
    super(props);
        this.state = {
          players: [],
          activePlayer: {},
          player: {}
        }
    }

    componentWillMount() {
          getPlayers().then((response) => {
                players = response.data;
                console.log(players);
                this.setState({ players:players });
            });
    }

    onClick(player) {
        // let activePlayer = player;
        this.setState({
            activePlayer:player
        });
        console.log(activePlayer);
        console.log(this.state);
        // archivePlayer(this.props.params.id)
        //     .then(() => {
        //         this.context.router.push('/player');
        //     });
    }

    renderPlayers() {
        return players.map((player) => {
            return (
                <tr key={player.id}>
                  <td>{player.NameLast}, {player.NameFirst}</td>
                  <td>{player.teamName}</td>
                  <td><Link to='/'><i className='material-icons small'>create</i></Link></td>
                  <td><button onClick={this.onClick.bind(this, player)}><i className='material-icons small'>delete</i></button></td>
                </tr>
            );
        });
    }


  render () {

    return (
        <div>
            {/*<AdminSubNav title="Player View" route="/team/add"/>*/}
            <div className="admin-table-wrapper">
                <h3>PLAYERS</h3>
                <Link to="/player/add">ADD PLAYER</Link>
                <table className="admin-table">
                <col className="at-col1"/>
                <col className="at-col2"/>
                <col className="at-col3"/>
                <col className="at-col4"/>
                    <thead>
                         <tr>
                             <th data-field='id'>Player Name</th>
                             <th data-field='name'>Team</th>
                             <th data-field='price'>Edit</th>
                             <th data-field='price'>Archive</th>
                         </tr>
                    </thead>
                    <tbody>
                    {this.renderPlayers()}
                    </tbody>
                </table>
            </div>
        </div>
    );
  }
}
4

4 回答 4

1

尝试这个

{this.renderPlayers.bind(this)()}

或者你也可以把它放在构造函数中

constructor(props) {
    super(props);
    this.state = {
      players: [],
      activePlayer: {},
      player: {}
    }
    this.renderPlayers = this.renderPlayers.bind(this);
}
于 2016-02-09T23:14:23.970 回答
1

你确定这不起作用，还是console.logs只是不起作用？setState是一个异步函数，所以如果你设置状态然后在它不存在之后立即查找它。尝试setState像这样使用回调：

this.setState({ /* state */ },() => {
   // console.log and check stuff
   // Also do any other function calls that you need to to explicitly   after the state has been updated
})

不确定这是否能解决它，但重要的是要记住 setState 的异步性质！

于 2016-02-10T02:03:32.127 回答
0

在您的 renderPlayers 函数中，您正在调用

players.map((player) =>

这将引用顶级玩家数组。我会尝试

this.state.players.map((player) =>

在您的 renderPlayers 函数中

我还会尝试在组件 api 上的 getInitialState 中设置您的状态

getInitialState() {
  return {
          players: [],
          activePlayer: {},
          player: {}
         }
}
于 2016-02-09T23:16:08.173 回答
0

也许问题出在 onClick 竞价中。

我遇到了同样的问题并通过 onClick 处理程序解决了它，试试这个：

constructor(props) {
    super(props);
        this.state = {
          players: [],
          activePlayer: {},
          player: {}
        }
       this.onClick = this.onClick.bind(this);
    }

你可以在 React 文档中看到它：https ://reactjs.org/docs/handling-events.html

于 2021-01-05T18:31:54.527 回答