将 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 = () => {&nbsp; &nbsp; const [data, setData] = useState([]);&nbsp; &nbsp; useEffect(() => {&nbsp; &nbsp; &nbsp; &nbsp; fetch('exemple.com')&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; .then((response) => response.json())&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; .then((json) => setData(json.result)) // set returned values into the data state&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; .catch((error) => console.error(error))&nbsp; &nbsp; }, []);&nbsp; &nbsp; const renderUsers = () => {&nbsp; &nbsp; &nbsp; &nbsp; return data.map((value, key) => {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // DO STUFF HERE&nbsp; &nbsp; &nbsp; &nbsp; })&nbsp; &nbsp; }&nbsp; &nbsp; return (&nbsp; &nbsp; &nbsp; &nbsp; <View style={{ flex: 1 }}>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {renderUsers()} //render results&nbsp; &nbsp; &nbsp; &nbsp; </View>&nbsp; &nbsp; )}