功能是不确定的
我有下面的代码块:在我的功能结合到this
的constructor
this.fetchUser = this.fetchUser.bind(this);
:功能是不确定的
class App extends Component {
constructor(props) {
super(props);
this.state = {
avatar: '',
...some more data...
}
this.fetchUser = this.fetchUser.bind(this);
}
render() {
return (
<div>
<SearchBox onSubmit={this.fetchUser}/>
<Card data={this.state} />
<BaseMap center={this.state.address}/>
</div>
);
}
componentDidMount() {
function fetchUser(username) {
let url = `https://api.github.com/users/${username}`;
this.fetchApi(url);
};
function fetchApi(url) {
fetch(url)
.then((res) => res.json())
.... some data that is being fetched ....
});
};
let url = `https://api.github.com/users/${this.state.username}`;
}
}
export default App;
不过,我得到了以下行TypeError: Cannot read property 'bind' of undefined
。
如何使componentDidMount
方法中的函数可见并可用于绑定?
编辑:
我把里面componentDidMount
功能的原因是因为在计算器上其他用户的建议。他建议:
@BirdMars是因为你不真的在父, 取数据和状态犯规真的保存地址对象。调用父项的 componentDidMount中的获取并更新那里的状态。这将 引发第二次渲染,将在新的状态通过与 地址对象(第一渲染会随着课程的一个空state.address ,直到完成读取和更新状态)
这里有一些基本的误解,你仍然可以通话内componentDidMount
的功能,但是你不应该定义他们里面。
简单地定义的功能外componentDidMount
,这将解决您的问题,这里是一个简短的例子
componentDidMount() {
this.fetchUser(this.state.username);
}
function fetchUser(username) {
let url = `https://api.github.com/users/${username}`;
this.fetchApi(url);
};
function fetchApi(url) {
fetch(url)
.then((res) => res.json())
.... some data that is being fetched ....
});
};
如果您在componentDidMount中声明函数,则它们只在该范围内可见,并且可以由组件本身访问。在你的组件中声明它们。 他在这篇文章中讨论的是从componentDidMount中调用函数,但不是在那里声明它们。
它的范围一个简单的问题:
function outer(){
function inner(){
}
}
inner(); // error does not exist
由于birdmars建议你应该叫this.fetchUser()
内部组件没有安装。但在外面声明函数!
class App extends Component {
render() {
return (
<div>
<SearchBox onSubmit={this.fetchUser}/>
<Card data={this.state} />
<BaseMap center={this.state.address}/>
</div>
);
}
fetchUser(username) {
let url = `https://api.github.com/users/${username}`;
this.fetchApi(url);
};
fetchApi(url) {
fetch(url)
.then((res) => res.json())
.... some data that is being fetched ....
});
};
componentDidMount() {
let url = username; //frome somewhere, most probably props then use props Changed function instead!
var user = his.fetchUser(url)
this.setState(() => {user: user});
}
}
export default App;
“从*的另一个人”建议你通话功能componentDidMount()
方法,而不是定义他们在那里。
所以,你应该这样做,而不是
class App extends Component {
constructor(props) {
...
this.fetchUser = this.fetchUser.bind(this);
this.fetchApi= this.fetchApi.bind(this);
}
...
fetchUser(username) {...}
fetchApi(url) {...}
componentDidMount() {
this.fetchUser(...);
...
}
}
任何原因,你为什么不把'fetchUser'和'fetchApi'外'componentDidMount'? –
@BirdMars你可以在'componentDidMount'中调用这些函数,但在外部定义它们。 – Walk
为什么不移动'componentDidMount'之外的函数或根本不使用函数? – topher