从容器访问组件'this`

问题描述：

我使用道具来传递我的组件需要运行的函数。尽可能保持组件不变。而不是将功能放入反应类。从容器访问组件'this`

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

为什么在此pr上绑定undefined操作功能？
我刚刚接近这个错误的方式吗？

谢谢！

很难说没有看到'loadImage'和返回结果是什么。介意分享吗？ – ZekeDroid

@ZekeDroid没想到它有多大的影响，但只是添加它。 – Justin

它的确如此，因为你现在正在绑定该道具的返回值。这意味着如果该道具没有返回语句，看起来像是这样，那么你试图绑定到'undefined'。 – ZekeDroid

答

如果loadImage没有返回函数，那么您可能在undefined上调用bind。您可能想改为使用this.props.loadImage.bind(this, this.props.src);。

也可以分别绑定和调用以显式设置参数： 'this.props.loadImage.bind（this）.call（undefined，this.props.src）' – bryce

我相信'bind'只会返回一个函数，right ？这意味着'loadImage'不会被调用 –

Ahhh由于某种原因，我认为绑定也称为函数，对于使用绑定仍然是新的。使用绑定与呼叫工作伟大的想法。很高兴知道那里。感谢@guavacat和@@ mr-meeseeks – Justin

答

为什么首先绑定this？

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'));

<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>

至少从我所了解的情况来看，最好的做法是尽可能简化组件，集中展示。将函数放入容器文件中以处理功能和数据检索。这种做法有时会增加一些额外的样板代码，但我觉得总体上值得。 – Justin

从容器访问组件'this`

相关推荐