javascript - React-Native — 访问 componentDidMount 外部的函数

Question

在 componentDidMount 内调用函数时，我遇到范围问题。函数getArrival 是在componentDidMount 外部定义的。我尝试了一些事情但没有成功。

定义 getArrival 以便我可以在 componentDidMount 内访问它的正确方法是什么？

提前谢谢您。

代码:

getArrival = (lines) => {
    return fetch('https://api.tfl.gov.uk/Line/' + lines + '/Arrivals/' + nearestStopId)
      .then((response) => response.json())
      .then((arrivalData) => {

        }, function() {
          // do something with new state
        });
        console.log(arrivalData);
      })
      .catch((error) => {
        console.error(error);
      }
    );
  }

  componentDidMount() {
    // Variable to store user data
    let userLines = null

    // Variable to store nearest stop id
    let nearestStopId = null

    // Check all variables against the API
    for (i = 0; i < apidata.length; i++) {

      // Checks user stops id against beacon id
      if (userdata[i].bustopId == beaconId) {
        // Store match into variable
        nearestStopId = userdata[i].bustopId
        userLines = userdata[i].buses

        // matchStop(nearestStopId)

        break // Breaks the loop
      }
      console.log(userLines)
    }

    // Data for stops
    return fetch('https://api.tfl.gov.uk/StopPoint/' + nearestStopId )
      .then((response) => response.json())
      .then((stopData) => {

        let linesId = []
        let selectedLines = []

        console.log("linesId at this stop", stopData.lines)
        console.log("userlines", userLines)

        // Loop through the data in stopData
        for (i = 0; i < stopData.lines.length; i++) {
          // ... and add all buses id from the API to the array
          let currentLine = stopData.lines[i].id
          linesId.push(currentLine)

          // Checks if user lines are included in current lines ...
          if ( userLines.includes(currentLine) ) {
            // ... if so, push it into selected lines
            selectedLines.push(currentLine)

            getArrival(lines) // This gets an error not defined

            let lines = selectedLines.toString()
          }
        }

        console.log("selectedLines", selectedLines, "from ", linesId)

        let ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
        this.setState({
          isLoading: false,
          dataSource: ds.cloneWithRows(selectedLines),
        }, function() {
          // do something with new state
        });
      })
      .catch((error) => {
        console.error(error);
      }
    );
  }

Answer 1

我假设您显示的创建 getArrival 的代码位于您的类主体中，例如: (你有confirmed that now)

class YourComponent extends React.Component {
    getArrival = () => {
        // ...
    };

    componentDidMount() {
        // ...
    }

    // ...
}

如果是这样，那就是使用类属性提案(尚未标准，但处于第 3 阶段)，它会在您的实例上创建一个属性(例如构造函数中的 this.getArrival = ...; )。

因此您可以通过this访问它:

    this.getArrival(lines)
//  ^^^^^

该代码位于一个(或两个)回调中，但它们似乎都是箭头函数，因此它们关闭了 this 并将使用一个 componentDidMount调用 with (这是正确的)。

参见this question's answers为什么我检查回调是箭头函数，以及在出于某种原因无法使用箭头函数的情况下该怎么做。