Question

我有以下代码块：

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以下一行：this.fetchUser = this.fetchUser.bind(this); constructor我将函数绑定到this。

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

编辑：

我将这些功能放在componentDidMount中的原因是因为StackOverflow上另一个用户的建议。他建议：

@BirdMars，因为你不能真正获取父级中的数据，并且状态不会真正保存地址对象。调用fetch 父级的componentDidMount并更新其中的状态。这将触发第二个渲染，它将以新的状态传递地址对象（第一个渲染将使用空状态。地址当然，直到你完成获取并更新状态）

Answer 1

这里存在一些根本性的误解，你仍然可以调用 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 .... 
   });
};

Answer 2

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

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

正如鸟类建议你应该在组件内部调用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;

Answer 3

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

Answer 4

＆＃34;来自StackOverflow的另一个人＆＃34;建议您在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(...);
        ...
    }
}

componentDidMount中的函数未定义

4 个答案: