Sending a post request to jsonplaceholder fails in React Redux

Question

I made a simple React Redux application that fetches a list of posts from jsonplaceholder and within it is a form that allows users to send a POST request. When I send a post request according to Redux DevTools extension it is added successfully marked as post number 101. Here is its snapshot

but the problem is after clicking the submit button 3 times it shows up on the screen.

The first two clicks show neither the title nor its body but it starts showing up on the third click. This is Posts.jsx file and here is how I used componentDidUpdate to update the component after post request.

class Posts extends Component {
    componentDidMount(){
        this.props.fetchPosts();
    }

    componentDidUpdate(nextProps) {
        if (nextProps.newPost) {
            this.props.posts.unshift(nextProps.newPost);
        }
    }
    
    renderPosts(){ // cutted for brevity  }

    render() {
        return (
            {this.renderPosts()}
        )
    }
}

const mapStateToProps = (state) => {
    return {
        posts: state.posts.items,
        newPost: state.posts.item,
    }
}


export default connect(mapStateToProps, { fetchPosts })(Posts);

Here is its GitHub link repository. The only error I am getting is the below error.

index.js:1 Warning: Each child in a list should have a unique "key" prop.

I don't believe this has anything to do with rendering the new post, but I already specified a "key" while looping through components.

What I am doing wrong during the course of this post request? Thank You.

Ashik · Answer 1 · 2020-10-18T15:16:14.100

0

You are using the wrong lifeCycle method. in order to get the nexProps you have to use componentWillReceiveProps instead of componentDidUpdate.

componentDidUpdate will give you the previous Props and previous State.


  componentWillReceiveProps(nextProps) {
    if (nextProps.newPost) {
      this.props.posts.unshift(nextProps.newPost);
    }
  }

The above snippet should work.

But this method is deprecated. react introduced an alternative (kind of) of this. which is called getDerivedStateFromProps. The problem is it is a static method and you can't access previous props (this.props) inside this method.

If you need it you did something wrong as it is an anti-pattern.

edited Oct 18 '20 at 15:16

answered Oct 18 '20 at 13:31

Ashik

2,888
8
28
53

Yes thank you for commenting. Isn't it unsafe now? In React documentation it is said that this life cycle is unsafe and should be avoided at all cost. https://reactjs.org/docs/react-component.html#updating – Mir Stephen Oct 18 '20 at 13:45
yes, It is deprecated. you can try `static getDerivedStateFromProps(nextProps, prevState)` for details check it out: https://stackoverflow.com/questions/50692160/react-componentwillreceiveprops-alternative – Ashik Oct 18 '20 at 13:49
I am confused React recommends `componentDidUpdate` instead of `getDerivedStateFromProps`. And please update your answer. – Mir Stephen Oct 18 '20 at 14:23
Thank you for updating the answer. The problem is I can't access `this` within this static method. Any solution? How I update the component after POST request? – Mir Stephen Oct 18 '20 at 16:11

Sending a post request to jsonplaceholder fails in React Redux

1 Answers1