javascript - Using useEffect with class Components - Stack Overflow

admin管理员组

文章数量:1404922

I have a class used to render a list of users from a database

    export default class Users extends React.Component {
    
      constructor() {
        super()
      this.state = {
          data : [] //define a state  

        }
      }
    
    renderUsers = () => {
        useEffect(() => {
          fetch('exemple')
            .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>
    
        );
      }
    }

The problem is this code will throw the following error :

Invalid Hook call, Hooks can be called only inside of the body ponent

I think is not possible to use hooks inside class ponent.. If it's not possible what is the best approach to fetch data from server inside this class ?

I have a class used to render a list of users from a database

    export default class Users extends React.Component {
    
      constructor() {
        super()
      this.state = {
          data : [] //define a state  

        }
      }
    
    renderUsers = () => {
        useEffect(() => {
          fetch('exemple.')
            .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>
    
        );
      }
    }

The problem is this code will throw the following error :

Invalid Hook call, Hooks can be called only inside of the body ponent

I think is not possible to use hooks inside class ponent.. If it's not possible what is the best approach to fetch data from server inside this class ?

• javascript
• react-native
• react-native-ios

Share Improve this question Follow asked Jul 24, 2020 at 21:15 anehmeanehme 56611 gold badge77 silver badges1919 bronze badges 1

• 1 ponentDidMount. – Jared Smith Commented Jul 24, 2020 at 21:16

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 6

You cannot use hooks in a class ponent. Use ponentDidMount instead.

Hooks can be used only in functional ponents.

You could rewrite your ponent to be a functional one like so:

export default Users = () => {
    const [data, setData] = useState([]);

    useEffect(() => {
        fetch('exemple.')
            .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>
    )

}

本文标签： javascriptUsing useEffect with class ComponentsStack Overflow