功能是不確定的

我有下面的代碼塊：在我的功能結合到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

功能是不確定的

回答

相關問題