React HandleDelete 类型错误未定义

Question

我有名为网站的 React 组件来处理状态

class Websites extends React.Component {

  constructor(props) {
    super(props);
    this.handleWebsiteDelete = this.handleWebsiteDelete.bind(this);
    this.state = {
      websites: this.props.websites
    }
  }

  handleWebsiteDelete(id) {
    console.log("delete")
    // How to Run This Function?
    // ...further code to delete id from state.websites
  }

  render () {
    return(
      <div className="row">
        {
          this.state.websites.map(function(website, index) {
            return (
              <WebsiteItem key={website.id} {...website} onDelete={this.handleWebsiteDelete}/>
            )
          })
        }
      </div>
    );
  }
}

然后我有一个名为 WebsiteItem 的 React 组件，它有一个函数 handleDelete an object:

class WebsiteItem extends React.Component {

  handleDelete(e) {
    e.preventDefault();
    $.ajax({
      method: "DELETE",
      url: "/websites/" + this.props.id 
    })
      .done(function(){
        this.props.onDelete(this.props.id);
      }.bind(this))
  }

  render() {
    return (
      <div className="card">
        {this.props.name}
        <a href="#" onClick={this.handleDelete.bind(this)}>Delete</a>
      </div>
    );
  }
}

我的目标是使用 WebsiteItem 组件内的 ajax 从服务器删除网站（已成功完成）和运行 Websites 组件内的函数 onDelete 来更新状态 this.state.websites。

我无法运行函数并出现错误：Uncaught TypeError: this.props.onDelete is not a function - 我尝试使用 bind(this) 但不确定我是否完全理解它。谢谢。

Answer 1

你几乎答对了。

您必须 bind 将传递给 this.state.websites.map() 的回调函数传递给您的组件实例。

为此，您必须将上下文作为第二个参数传递给 .map()

{
    this.state.websites.map(function(website, index) {
        return (
          <WebsiteItem key={website.id} {...website} onDelete={this.handleWebsiteDelete}/>
        )
    },this)
}

或者使用箭头函数

{
    this.state.websites.map((website, index) => {
        return (
          <WebsiteItem key={website.id} {...website} onDelete={this.handleWebsiteDelete}/>
        )
    })
}

React HandleDelete 类型错误未定义

React HandleDelete TypeError undefined

javascript

reactjs

react-rails