Question

由于某些原因，我的React Native项目中的ComponentDidMount函数似乎没有运行。最近，我尝试在代码中添加搜索功能，实现这些功能后，该功能似乎无法正常工作。因此，我尝试删除新功能，但该功能仍未运行。

这是代码，也许我遗漏了一些东西。

export default class CategoryScreen extends React.Component {

  constructor(props){
    super(props);
    this.navigate = this.props.navigation.navigate;
        this.state={
      data : [],
      isVisible: true,
      city : '280',
      isLoading: true,
      searched: ''
    }
  }
async componentDidMount() {
    let id = this.props.navigation.state.params.category
    let city = this.state.city
    let result;
    try {
        console.log('check1')
      result = await axios.request({
        method: 'get',
        url: `https://developers.zomato.com/api/v2.1/search?city_id=${city}&q=${searched}&category=${id}`,
        headers: {
          'Content-Type': 'application/json',
          'user-key': "a31bd76da32396a27b6906bf0ca707a2",
        },
      })
    } catch (err) {
      err => console.log(err)
    }
    this.setState({
      isLoading: false,
      data: result.data.restaurants
    })
    console.log('check2')
  }
render() {
    return ()
}
}

当我运行项目时，终端显示check1，但check2没有显示

Answer 1

您需要将代码的最后一部分放入finally {...}块中，该块将在try成功完成后执行，或者-如果触发了捕获，则在catch块完成后执行。

要注意的一件事：由于您没有result的初始值，如果您的try块抛出错误，那么当您尝试使用{{1 }}，因为result.data.restaurants不存在。

我认为解决此问题的最干净方法是将setState分成两个。仅在有结果的情况下设置data：

data

请注意，还将async componentDidMount() { try { const id = this.props.navigation.state.params.category; const city = this.state.city; console.log('check1'); const result = await axios.request({ method: 'get', url: `https://developers.zomato.com/api/v2.1/search?city_id=${city}&q=${searched}&category=${id}`, headers: { 'Content-Type': 'application/json', 'user-key': 'a31bd76da32396a27b6906bf0ca707a2' } }); this.setState({ data: result.data.restaurants }); // only triggers if your axios request worked } catch (err) { console.log(err); // remove the erroneous `err =>` } finally { // add this finally block this.setState({ isLoading: false }); // now only set isLoading once everything is complete console.log('check2'); } }声明更改为let，因为您没有重新分配它们（也不应该！），并且仅将它们移到了所需的范围内。

React Native ComponentDidMount没有加载

1 个答案: