无法在文本中写入状态

Question

export default class App extends React.Component {
  constructor(){
    super();
    this.state = {
      ready: false,
      where: {lat:null, lng:null, adr:null},
      error: null,
      temps: 8,
    }
  } 
  geoSuccess = (position) => {
    this.setState({
      ready:true,
      where: {lat: position.coords.latitude, lng:position.coords.longitude},
    })
    let latit = this.state.where.lat
    let lonit = this.state.where.lng
    var latitAbc = latit.toFixed(4)
    var lonitAbc = lonit.toFixed(4)
    let latitStr = latitAbc.toString()
    let lonitStr = lonitAbc.toString()
    console.log(latit)
    console.log(lonit)
    
    const options = {
      method: 'GET',
      url: 'https://weatherapi-com.p.rapidapi.com/forecast.json',
      params: {q: (latitStr+','+lonitStr)},
      headers: {
        'x-rapidapi-key': 'f7982bbb0dmsh562cc7597c785bbp1857b5jsn07695d566c0b',
        'x-rapidapi-host': 'weatherapi-com.p.rapidapi.com'
      }
    };
    axios.request(options).then(function (response) {
      let temp = response.data.current.temp_c
      console.log(temp);
      this.setState({
        temps: temp
      })
    }).catch(function (error) {
      console.error(error);
    });
  }
  geoFailure = (err) => {
    this.setState({error: err.message})
  }
  render(){
    return (
              <Text style={styles.konum}>{
              `Konumunuz Enlem: ${this.state.where.lat} Boylam: ${this.state.where.lng} Sıcaklık:${this.state.temps}`
              }
              </Text>
    );
  }
}

我正在尝试制作一个天气应用程序，我正在从地理定位器获取纬度和经度，并在天气 api 中使用此变量，但是，

我无法将我从天气 api 获取的临时变量写入文本。 我想我需要对 react-native 中的 state 和 useState 的帮助

Answer 1

你不需要在 JSX 中使用模板文字，下面的代码就可以了

<Text style={styles.konum}>
          Konumunuz Enlem: {this.state.where.lat} Boylam: {this.state.where.lng} Sıcaklık: {this.state.temps}
          }
</Text>

Answer 2

根据代码观察，存在一些问题，我可以看到您在 geoSuccess 方法中设置状态后立即使用该状态。

试试下面的代码：

export default class App extends React.Component {
    constructor(){
      super();
      this.state = {
        ready: false,
        where: {lat:null, lng:null, adr:null},
        error: null,
        temps: 8,
      }
      this.geoSuccess = this.geoSuccess.bind(this)
      this.geoFailure = this.geoFailure.bind(this)
    } 
    geoSuccess = (position) => {
      this.setState({
        ...this.state,
        ready:true,
      })
      let latit = position.coords.latitude
      let lonit = position.coords.longitude
      let latitStr = latit.toFixed(4)
      let lonitStr = lonit.toFixed(4)
      
      const options = {
        method: 'GET',
        url: `https://weatherapi-com.p.rapidapi.com/forecast.json?q=${latitStr},${lonitStr}`,
        headers: {
          'x-rapidapi-key': 'f7982bbb0dmsh562cc7597c785bbp1857b5jsn07695d566c0b',
          'x-rapidapi-host': 'weatherapi-com.p.rapidapi.com'
        }
      };
      axios.request(options).then(function (response) {
        let temp = response.data.current.temp_c
        this.setState({
          ...this.state,
          temps: temp
        })
      }).catch(function (error) {
        console.error(error);
      });
    }
    geoFailure = (err) => {
      this.setState({error: err.message})
    }
    render(){
      return (
          <Text style={styles.konum}>
          {
              `Konumunuz Enlem: ${this.state.where.lat} Boylam: ${this.state.where.lng} Sıcaklık:${this.state.temps}`
          }
          </Text>
      );
    }
  }