功能是不确定的

我有下面的代码块：在我的功能结合到this的constructorthis.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 ，直到完成读取和更新状态）

来源

2017-10-08 IsaaK08

任何原因，你为什么不把'fetchUser'和'fetchApi'外'componentDidMount'？ –

@BirdMars你可以在'componentDidMount'中调用这些函数，但在外部定义它们。 – Walk

为什么不移动'componentDidMount'之外的函数或根本不使用函数？ – topher

这里有一些基本的误解，你仍然可以通话内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 .... 
    }); 
};

来源

2017-10-08 18:47:42 lustoykov

如果您在componentDidMount中声明函数，则它们只在该范围内可见，并且可以由组件本身访问。在你的组件中声明它们。他在这篇文章中讨论的是从componentDidMount中调用函数，但不是在那里声明它们。

来源

2017-10-08 18:46:43 justadudewhohacks

它的范围一个简单的问题：

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;

来源

2017-10-08 18:46:55

“从StackOverflow的另一个人”建议你通话功能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(...); 
     ... 
    } 
}

来源

2017-10-08 18:50:26 lankovova

功能是不确定的

回答

相关问题