javascript componentDidMount 中的函数未定义

Functions inside componentDidMount are undefined

提问by birdybird03

I have the following block of code:

我有以下代码块：

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;

However, I get a TypeError: Cannot read property 'bind' of undefinedfor the following line: this.fetchUser = this.fetchUser.bind(this);in the constructorwhere I bind the function to this.

但是，我得到了TypeError: Cannot read property 'bind' of undefined以下行：this.fetchUser = this.fetchUser.bind(this);在constructor我将函数绑定到this.

How can I make the function, which is inside componentDidMountmethod, visible and available for binding?

如何使componentDidMount方法内部的函数可见并可用于绑定？

EDIT:

编辑：

The reason I'm putting the functions inside componentDidMountwere because of a suggestion from another user on StackOverflow. He suggested that:

我把这些函数放在里面componentDidMount的原因是因为 StackOverflow 上另一个用户的建议。他建议：

@BirdMars that because you don't realy fetch the data in the parent, and the state doesnt realy hold the address object. call the fetch in componentDidMount of the parent and update the state there. this will trigger a second render that will pass in the new state with the address object (the first render will be with an empty state.address of course until you finish the fetch and update the state)

@BirdMars 那是因为您并没有真正获取父级中的数据，并且状态并没有真正保存地址对象。在父组件的 componentDidMount 中调用 fetch 并更新那里的状态。这将触发第二次渲染，该渲染将通过地址对象传入新状态（第一次渲染将具有空状态。当然，直到您完成获取并更新状态）

回答by Lyubomir

There is some fundamental misunderstanding here, you can still callthe functions inside componentDidMount, however you should not definethem inside it.

这里有一些基本的误解，你仍然可以调用里面的函数componentDidMount，但是你不应该在里面定义它们。

Simply define the functions outside componentDidMountand this will solve your problems, here is a short example

只需在外部定义函数即可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 .... 
   });
};

回答by Joel Harkes

Its a simple matter of scope:

这是一个简单的范围问题：

function outer(){
  function inner(){
  }
}
inner(); // error does not exist

As birdmars suggested you should call this.fetchUser()inside component did mount. but declare the function outside!

正如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;

回答by justadudewhohacks

If you declare the functions inside componentDidMount they are only visible in that scope and get be accessed by the component itself. Declare them in your component. What he was talking about in this post was to call the functions from componentDidMount, but not to declare them in there.

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

回答by lankovova

"Another guy from StackOverflow" suggest you to callfunctions in componentDidMount()method, but not to define them there.

“来自 StackOverflow 的另一个人”建议您在方法中调用函数componentDidMount()，但不要在那里定义它们。

So you should do this instead

所以你应该这样做

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(...);
        ...
    }
}