Question

这里我有一张桌子。其中我想删除行，只是想看到当时的更改（带删除行的表）。我发现forceupdate()方法执行此操作或更改状态只是重新渲染，但这两种情况对我都不起作用。

以下是代码：

var table = React.createClass({

  getInitialState:function() {
    return {
      data:[]
    };
  },
componentDidMount: function() {
    $.get('http://improwised.cgc.com/portfolios?token=yR225Y',
    function(result) {                    
      if (this.isMounted()) {
        this.setState({
          data: result.data,
        });
      }
    }.bind(this));
  },


  getComponent: function(Key) {

    $.ajax({
      type: "DELETE",
      url: "http://improwised.cgc.com/portfolios/"+Key+"?        token=yR225Y",
      //context: document.body
    })
  },


  render:function() {

    return (
      <div>
          <Table striped bordered condensed hover>
            <thead>
              <tr>

                <th>Name</th>
                <th>current_balance</th>
                <th>market_price</th>
                <th>profit/loss</th>
                <th>delete</th>

              </tr>
            </thead>
            <tbody>
              {
                this.state.data.map(function(data, index) {
                  return <tr>
                  <td><a href={'/#/portfolio/'+data.id}>{data.name}</a></td>
                  <td>{data.current_balance}</td>
                  <td></td>
                  <td></td>
                  <td><button value={data.id} onClick={this.getComponent.bind(this,data.id)}>delete</button></td>
                  </tr>
                }.bind(this))
              }

            </tbody>
          </Table>
        </div>
    );
  }
});
module.exports = table;

Answer 1

您需要在删除后设置新状态，如此

getComponent: function(Key) {
  $.ajax({
    type: "DELETE",
    url: "http://improwised.cgc.com/portfolios/" + Key + "?token=yR225Y",
  }).success(function () {
    var data = this.state.data.filter(function (e) {
      return e.id !== Key;
    });

    this.setState({ data: data });
  }.bind(this))
}

如何在点击后立即重新渲染？

1 个答案: