0
import React, { useState ,Fragment, useEffect } from 'react';
import PropTypes from 'prop-types';
import { withRouter } from 'react-router'
import { Link } from 'react-router-dom';
import { connect } from 'react-redux';
import Moment from 'react-moment';
import { addPost, clearPost } from '../../actions/post';
import { setAlert } from '../../actions/alert';
import { useForm } from "react-hook-form";
import { getPost } from '../../actions/post';
import axios from 'axios';
import $ from 'jquery';
import 'animate.css';


// To do list

// 1. Fix add featured image when not selected.
// 2. Reload on page load, so it actually loads the post.
// 3. Fix issue when shows old post, so reload post before hand..

const EditPost = ({ post: { post, loading }, getPost,setAlert, auth: {user, isAuthenticated},  match}) => {
    let count = 0;

    const [state, setState] = useState({
        text: '', 
        title: '', 
        excerpt: '',
        image: { preview: "", raw: "", filename: ""},
        tags: '',
        credit: '',
        hyperlink: '',
        edit: true,
    });
    
    useEffect(() => {
        
        getPost(match.params.id);
        // if (!loading) {
        //   const postData = { ...state };
        //   for (const key in post) {
        //     if (key in postData) postData[key] = post[key];
        //   }
        //   setState(postData, () => {console.log(this.state)});
        // }


        if(!loading) {
            setState({
                ...state,
                text: post.text, 
                title: post.title, 
                excerpt: '',
                image: { preview: "", raw: "", filename: ""},
                tags: '',
                credit: '',
                hyperlink: '',
            }, () => {console.log(state)});
          }
      }, [loading, getPost]);



    const {
        text,
        title,
        excerpt,
        tags,
        image,
        credit,
        hyperlink
    } = state;

This takes the old state or previous state and set it, not the actual one that has loaded now?

It only works, when I reload the page, or press on the post twice or enter on the URL where it contains the ID of the post.

Any idea how I could force reload the page? I have also used a reducer to clearPost before loading this one but unfortunately no luck.

If I access the data directly such as post.text, it works, it loads perfectly fine, but then when I need to make editable, that doesn't work and then I have to use setState, but no luck.

Julius'Web
  • 83
  • 1
  • 1
  • 12
  • You need to show a more complete example, but this is very likely a variation of [Why calling react setState method doesn't mutate the state immediately?](https://stackoverflow.com/questions/30782948/why-calling-react-setstate-method-doesnt-mutate-the-state-immediately) – Guy Incognito Sep 09 '20 at 12:15
  • Sorry, just not sure how I could best do that. Simply, I have a single redux state "post" that holds my post data, but when changing between different posts, the state changes instantly, but when trying to setState as in the example, it will for some reason show me the old post, even thought the redux state "post" data has already updated to the current post, but the setState is showing old data? Hope that makes more sense, thanks again! – Julius'Web Sep 09 '20 at 12:25
  • If you don't know which parts are relevant, post the entire component. – Guy Incognito Sep 09 '20 at 12:31
  • Are you sure this piece of code is executed? Is it in an effect hook? – 7hibault Sep 09 '20 at 13:21
  • Please have a look now, I added the main code, and if I was to add "post" in useEffect , as we have [loading, getPost], that would make it loop, non stop.. thanks – Julius'Web Sep 09 '20 at 15:39

0 Answers0