javascript - 从容器访问组件 `this`

Question

我正在使用 props 传递我的组件需要运行的函数。使组件尽可能保持愚蠢。而不是将函数放入react类中。

我需要更新组件状态，但在 prop 函数中访问 setState 时遇到问题。我尝试过做类似的事情，这样我的函数就可以访问它，但我不断收到错误:

组件

  componentDidMount(){
    this.props.loadImage(this.props.src).bind(this);
  }

容器加载图片功能

let loadImage = (src)=>{
  console.log('loading Image');    
  fetch(src).then(function( data ) {
      console.log('success');
      that.setState({'imgUrl':src});
  }).catch(function( error ) {
      console.log('fail');
      setTimeout(loadImage(src), 1000);
  });

};

错误:

component.js:67 Uncaught TypeError: Cannot read property 'bind' of undefined(…)

1. 为什么此 prop 函数上的 bind 未定义？
2. 我只是以错误的方式处理这个问题吗？

谢谢!

Answer 1

如果loadImage不返回函数，那么您可能在未定义时调用bind。您可能想要这样做 this.props.loadImage.bind(this, this.props.src); 。