Invalid Hook Call in reactjs

Question

Getting invalid hook call if I use setState for class component or useState for functional component.

const [reviewData,setReviewData]=React.useState(undefined);

     fetch('/reviewAll/')
                .then(res => res.json())
                .then(data => {
                  if(data !== null || data !== undefined){
                    console.log(data)
                    this.setState({reviewData:data}) or setReviewData([]); <---------------------------------
                }
          })

if I comment out setState(or useState), it's working fine. Tried with axios as well.

Answer 1

Try like this. Snippet is working fine without error.

const Component = () => {
  const [reviewData, setReviewData] = React.useState(undefined);
  
  React.useEffect(() => {
    fetch('https://swapi.dev/api/planets/1/')
    .then(res => res.json())
    .then(data => setReviewData(data))
  }, [])

  if (!reviewData) {
    return <div> no data </div>
  }
  return <div> {reviewData.name} </div>
}

ReactDOM.render(<Component />, document.getElementById('app'));

<script crossorigin src="https://unpkg.com/react@17/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>

<div id="app"></div>