Question

该应用确实确实可以成功编译，但是我的终端返回TypeError：当前未定义。在我的编辑器上，这是指第13行，或者说“ temp：data.current.temp_f”

这会阻止我的应用调用API。

所有有效的方法是删除this.state.lon，但这是我无法克服的障碍。

//错误代码的数据：

async componentDidMount () {
    const url = `http://api.apixu.com/v1/current.json?key=03492304982049820498foifjoifjaoijfas39&q=${this.state.lon}`;
    const response = await fetch(url); 
    const data = await response.json(); 
    this.setState({temp: data.current.temp_f, loading: false});
    console.log(data);
  }

//组件的数据

class LocaterLong extends React.Component {


        state = {lon: null, errorMessage:''}; 

        componentWillMount() {
            window.navigator.geolocation.getCurrentPosition(
                position => this.setState({lon: position.coords.longitude }), //pass an object, that updates a property 
                err => this.setState({ errorMessage: err.message}) 
            );    
        }

在发生此错误之前，我能够成功提取必要的数据并将其显示。我正在尝试将状态“ lon”作为道具传递给url。当我删除它时，该应用程序又可以工作了，因此我绝对可以将问题缩小到某些状态。我的另一个怀疑是，它与组件的生命周期有关，作为一个初学者，我仍在努力寻求解决方案。我的其他组件是一个较长的地理位置请求。我使用componentWillMount是因为它碰巧可以工作，即使我最初引用的教程使用的是DidMount。

关于我遇到的问题的疯狂之处在于，一开始它确实起作用了。 long已成功传递到url中，并更改了该参数以给我一个位置。

Answer 1

可能发生的是this.state.lon在被调用componentDidMount时没有得到保证存在（尽管有时可能！）。

我认为您可以稍微简化状态管理。除非组件的其他方面需要lon的持久性，否则您可以在位置回调中内联获取，如下所示。请记住，在未定义data.current或响应为空或不完整（也许在loadData函数中？）时，您仍然应该处理

（还要注意，componentWillMount在最近的React版本中一直是marked for deprecation。）

class LocaterLong extends React.Component {
  state = {errorMessage:''}; 

  async loadData(lon) {
    const url = `http://api.apixu.com/v1/current.json?key=03492304982049820498foifjoifjaoijfas39&q=${lon}`;
    const response = await fetch(url); 
    return response.json(); 
  }

  componentDidMount() {
    window.navigator.geolocation.getCurrentPosition(
      async position => {
        const data = await loadData(position.coords.longitude);
        this.setState({ temp: data.current.temp_f, loading: false });
      },
      err => this.setState({ errorMessage: err.message}) 
    );  
  }

  render() {
    // ...
  }
}

状态问题-可以正常使用，但现在返回了一个难以理解的错误

1 个答案: