Javascript componentDidMount或componentWillMount在React Native中不工作？

谁能告诉我我做错了什么。我正在尝试使用API获取城市，但componentDidMount和componentWillMount都在工作

我已经使用按钮测试了getWeather函数，该函数正在工作，但当我尝试使用componentDidMount或componentWillMount调用它时，它不工作

我的代码如下：

import React, { Component } from 'react';
import { StyleSheet, Text, View } from 'react-native';
import Header from './Header';
import { TextInput, Card, Button, Title } from 'react-native-paper';
import { useState } from 'react';
import { FlatList } from 'react-native-gesture-handler';

export default function Home() {

    const [info, setInfo] = useState([{
        city_name: "loading !!",
        temp: "loading",
        humidity: "loading",
        desc: "loading",
        icon: "loading"
    }]);

    getWeather = () => {
        console.log("Hello Weather");
        fetch("https://api.openweathermap.org/data/2.5/find?q=London&units=metric&appid={MY_API_KEY}")
        .then(res => res.json())
        .then(data => {
            console.log(data);
            /*setInfo([{
                city_name: data.name,
                temp: data.main.temp,
                humidity: data.main.humidity,
                desc: data.weather[0].description,
                icon: data.weather[0].icon}]);
                */
        })
    }

    componentWillMount = () => {
        console.log("Hello Will");
        this.getWeather();
    }
    
    componentDidMount = () => {
        console.log("Hello Did");
        this.getWeather();
    }

    return (
        <View style={styles.container}>
          <Header title="Current Weather"/>
          <Card style = {{margin: 20}}>
              <View>
                  <Title>{info.city_name}</Title>
                  <Title>{info.desc}</Title>
              </View>
          </Card>
          <Button onPress={() => this.getWeather()} style={{margin: 40, padding: 20}}>Testing</Button>
        </View>
    );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
});

import React，{Component}来自'React'；
从“react native”导入{样式表、文本、视图}；
从“./头”导入头；
从“react National paper”导入{TextInput、卡片、按钮、标题}；
从“react”导入{useState}；
从“反应本机手势处理程序”导入{FlatList}；
导出默认函数Home（）{
const[info，setInfo]=useState([{
城市名称：“装货！！”，
温度：“加载”，
湿度：“装载”，
描述：“装载”，
图标：“正在加载”
}]);
getWeather=（）=>{
console.log（“你好天气”）；
取回（“https://api.openweathermap.org/data/2.5/find?q=London&units=metric&appid={MY_API_KEY}”）
.then（res=>res.json（））
。然后（数据=>{
控制台日志（数据）；
/*setInfo([{
城市名称：data.name，
温度：data.main.temp，
湿度：data.main.湿度，
desc:data.weather[0]。说明，
图标：data.weather[0].icon}）；
*/
})
}
组件将装入=（）=>{
log（“Hello Will”）；
这个。getWeather（）；
}
componentDidMount=（）=>{
log（“Hello Did”）；
这个。getWeather（）；
}
返回(
{info.city_name}
{info.desc}
this.getWeather（）}style={{{margin:40，padding:20}>测试
);
}
const styles=StyleSheet.create({
容器：{
弹性：1，
},
});

componentDidMount

和

componentWillMount

仅在基于类的组件中工作；这里有一个功能组件。您可以使用

useffect

钩子来完成相同的操作

useEffect(() => {
  getWeather();
}, []);

请注意，

此

不存在于功能组件中；您可以在声明函数后直接调用它

---

如果您以前没有使用过

useffect

，那么第二个参数可能是关于数组的问题。如果为空，它将在mount上运行，并将运行卸载时从第一个参数返回的内容。如果要再次运行效果，请将依赖项添加到数组中。

ComponentDidMount将仅在类组件中工作。使用useEffect React钩子可以实现相同的效果，而不会出现问题

谢谢！它起作用了。你能在你的回答中告诉我更多关于数组中的第二个参数的信息吗？请检查以备进一步阅读。如果您有一个名为

users

的道具可能会更改，并且希望每次更改时都运行效果，则可以添加

[users]

作为第二个参数。