how to load with useEffect [duplicate]

Solution for how to load with useEffect [duplicate]
is Given Below:

I try to give data with param using Route
and using param, get data from server and print it.
but useEffect doesn’t work

export default function Board({ match }) {
  const [content, setContent] = useState([]);

  useEffect(() => {
    getOnePost(match.params.number).then((response) => {
      setContent(response);
    });
    console.log(content);
  }, []);

  return (
    <div>
      <div>hi</div>
    </div>
  );
}
          <PrivateRoute
            path="/board/:number"
            authenticated={this.state.authenticated}
            component={Board}
          />

enter image description here

I think you need to receive the url parameters from the useParams hook.

import { useParams } from "react-router-dom";

export default function Board() {
  ...

  const { number } = useParams(); // get url parameters 

  useEffect(() => {
    getOnePost(number).then((response) => {
      setContent(response);
    });
    console.log(content);
  }, []);

  ...

}

I think getonepost function is not defined as a async function. Please use this code.

useEffect(() => {
getOnePost(match.params.number).then((response) => {
  setContent(response);
  console.log(content);
});

}, []);
or you can try this either.

const [ update, setUpdate]=useState(true);

 useEffect(() => {
          console.log(content);
        });
        
      }, [update]);

    getOnePost(match.params.number).then((response) => {
          setContent(response);
          setUpdate(!update);
    }

You should pass match.params.number to useEffect as second argument.

 useEffect(() => {
    getOnePost(match.params.number).then((response) => {
      setContent(response);
    });
    console.log(content);
  }, [match.params.number]);

getOnePost is an asynchronous promise. So attempting to console.log(content) on the next line will not wait for the promise to resolve, and will log the initial value of [].

This is expected behaviour.

If you really want to log the value of content when it changes, add another useEffect with a dependency on content and put the console.log there.

export default function Board({ match }) {
  const [content, setContent] = useState([]);

  useEffect(() => {
    getOnePost(match.params.number).then((response) => {
      setContent(response);
    });
  }, []);

  useEffect(() => {
    console.log(content);
  }, [content])

  return (
    <div>
      <div>hi</div>
    </div>
  );
}

see, you are using console.log outside the .then statement, as you are writing asynchronous code it will console.log the content first then make a request to the server. if you want to see response, console.log it inside the then statement like this:-

  const [content, setContent] = useState([]);

  useEffect(() => {
    getOnePost(match.params.number).then((response) => {
      setContent(response);
      console.log(response);
    });
    
  }, []);

and if you want to check weather it is stored in state or not you can do this:-

const [content, setContent] = useState([]);

  useEffect(() => {
    getOnePost(match.params.number).then((response) => {
      setContent(response);
    });
    
  }, []);
useEffect(() => {
   console.log(content)
}, [content])

the first useEffect run to get data from api and second run when content state changes.