Question

我使用道具来传递我的组件需要运行的函数。保持组件尽可能愚蠢。而不是将函数放入反应类中。

我需要更新我的组件状态，但是我在我的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(…)

为什么在这个prop函数上绑定undefined？
我只是走错了路？

谢谢！

Answer 1

如果loadImage没有返回某个函数，那么您可能在未定义时调用bind。您可能希望改为this.props.loadImage.bind(this, this.props.src);。

Answer 2

为什么首先绑定this？

＆＃13;

class Example extends React.Component {
  constructor() {
    super();
    this.state = {
      data: ''
    }
  }
  componentDidMount() {
    this.doSomething('hello');
  }
  doSomething(data) {
    this.setState({
      data
    }, () => console.log(this.state));
  }
  render() {
    return(
      <div>{this.state.data}</div> 
    );
  }

}

ReactDOM.render(<Example/>, document.getElementById('View'));

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="View"></div>

＆＃13;

从容器访问组件`this`

2 个答案: