如何使 UseEffect 挂钩逐步运行而不是持续运行？

Question

I have UseEffect hook that fetches data from DB and I want it to run FIRST in my component, but it runs last.

How do I make it run before "console.log(titleee)"?

Code:

 const [cPost, setCPost] = useState([]);
  const postId = id.match.params.id;

  useEffect(() => {
    axios.get('http://localhost:5000/posts/'+postId)
      .then(posts => {
        setCPost(posts.data);
        console.log("test");
      })
  }, []);



const titleee = cPost.title;
console.log(titleee);

Answer 1

I don't think that's the correct path that you want to take.

In order to show the cPost on your page after the request /posts/+postId finished you can opt-out for two following options.

You can show a "loader" to the user if the cPost data is crucial for your whole component.

const [fetchingCPost, setFetchingCPost] = useState(false)
const [cPost, setCPost] = useState({});
const postId = id.match.params.id;

useEffect(() => {
  setFetchingCPost(true)
  axios.get('http://localhost:5000/posts/'+postId)
    .then(posts => {
      setFetchingCPost(false)
      setCPost(posts.data);
  })
}, []);

return fetchingCPost && <div>Loading</div>

Or you can have some default values set from the start for cPost . Just to make sure that your code doesn't break. I think the first solution might be more UX acceptable.

const [cPost, setCPost] = useState({title: '', description: ''});

If you want to store title as a separate variable you can use useMemo for instance or do it via useState same as with cPost . But even then you can't "create" it after the request finishes, you can simply change its value .

In case you want to use useMemo you can make it dependent on your cPost .

const cPostTitle = useMemo(() => {
  return !!cPost.title ? cPost.title : ''
}, [cPost])

Answer 2

You have to change you'r way of thinking when programming in react. It is important to know how react works. React does not support imperative programming, it rather support declarative and top down approach, in which case you have to declare your markup and feed it with you'r data then the only way markup changes is by means of changing you'r data. So in you'r case you are declaring a watched variable using useState hook const [cPost, setCPost] = useState([]);, this variable (cPost) has initial values of [] then react continues rendering you'r markup using initial value, to update the rendered title to something you get from a network request (eg: a rest API call) you use another hook which is called after you'r component is rendered (useEffect). Here you have chance to fetch data and update you'r state. To do so you did as following:

  useEffect(() => {
    axios.get('http://localhost:5000/posts/'+postId)
      .then(posts => {
        setCPost(posts.data);
      })
  }, []);

this code results in a second render because part of data is changes. Here react engine goes ahead and repaint you'r markup according data change.

If you check this sandbox you'll see two console logs, in first render title is undefined in second render it's something we got from network.

Answer 3

Try adding async/await and see if it works. Here is the link btw for your reference https://medium.com/javascript-in-plain-english/how-to-use-async-function-in-react-hook-useeffect-typescript-js-6204a788a435