将 useEffect 与类组件一起使用

Question

我有一个用于从数据库中呈现用户列表的类    export default class Users extends React.Component {          constructor() {        super()      this.state = {          data : [] //define a state          }      }        renderUsers = () => {        useEffect(() => {          fetch('exemple.com')            .then((response) => response.json())            .then((json) => this.setState({data: json.result})) // set returned values into the data state            .catch((error) => console.error(error))        }, []);           return  this.state.data.map((value,key)=>{ // map state and return some views             ......          })     }         render() {        return (                 <View style={{ flex: 1 }}>              {this.renderUsers()} //render results            </View>            );      }    }问题是这段代码会抛出以下错误：无效的 Hook 调用，Hooks 只能在 body 组件内部调用我认为不可能在类组件内部使用挂钩。如果不可能，从此类内部的服务器获取数据的最佳方法是什么？

Answer 1

您不能在类组件中使用挂钩。改用componentDidMount。

Answer 2

钩子只能用在功能组件中。

您可以将您的组件重写为功能性组件，如下所示：

export default Users = () => {

    const [data, setData] = useState([]);

    useEffect(() => {

        fetch('exemple.com')

            .then((response) => response.json())

            .then((json) => setData(json.result)) // set returned values into the data state

            .catch((error) => console.error(error))

    }, []);

    const renderUsers = () => {

        return data.map((value, key) => {

            // DO STUFF HERE

        })

    }

    return (

        <View style={{ flex: 1 }}>

            {renderUsers()} //render results

        </View>

    )

}