React) State in useState can't receive value

Question

import { useEffect, useState } from "react";
import { useDispatch } from "react-redux";
import { getItem } from "../../utility/localStorage";
import { getMemoWithUser } from "../../redux/memo/actionCreator";

const MemoList = () => {
    var [memo, setMemo] = useState([]);    
    const dispatch = useDispatch();
           
    useEffect( () => {  
        getAllMemo();
    },[]);
    
    const getAllMemo = async () => {
        // get memo list with user
        const body = {
            user_id : getItem('user').id
        };        
        let response = await dispatch(getMemoWithUser(body));        
        console.log(response.data.data);
        setMemo(() => response.data.data);
        console.log(memo)
    };

    return (
        
        <div>            
            {memo.map( memo => {
                <span key={memo.id}>memo.memo</span>
            })}
        </div>
    );
};

export default MemoList;

this is my component. console.log is

memo.js 22line) (16) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]

memo.js 24line) []

and my return section can't show anything. how can i use state [memo] ?

https://daveceddia.com/useeffect-hook-examples/ - this would help you, try to understand the lifecycle, otherwise your implemetation may take wrong direction — Anshuk Sharma, Jan 23 '22 at 05:21

score 1 · Accepted Answer · answered Jan 23 '22 at 13:28

You can't get the updated state value after invoking the setting function! e.g. This is your code block.

setMemo(() => response.data.data);
console.log(memo)

Here is documentation from React website.

https://reactjs.org/docs/faq-state.html

Why is setState giving me the wrong value? In React, both this.props and this.state represent the rendered values, i.e. what’s currently on the screen.

Calls to setState are asynchronous - don’t rely on this.state to reflect the new value immediately after calling setState. Pass an updater function instead of an object if you need to compute values based on the current state (see below for details).

And you can use steState function like the following:

setMemo(response.data.data) // without reference of previous state 

setMemo(prevState => ([...prevState, response.data.data]) // update with merged value with previous state.

And to monitor your state change, you need to use useEffect hook.

useEffect(() => {
    // todo for memo change.
}, memo);

score 0 · Answer 2 · edited Jan 23 '22 at 13:34

Try with this. You may use setMemo method like setMemo(response.data.data).

const getAllMemo = async () => {
        // get memo list with user
        const body = {
            user_id : getItem('user').id
        };        
        let response = await dispatch(getMemoWithUser(body));        
        console.log(response.data.data);
        setMemo(response.data.data);
        console.log(memo)
    };

score -1 · Answer 3 · answered Jan 23 '22 at 05:15

-1

try doing setMemo([ ...response.data.data ]) instead.

answered Jan 23 '22 at 05:15

KyleRifqi

489
2
15

See "[Explaining entirely code-based answers](https://meta.stackoverflow.com/q/392712/128421)". While this might be technically correct it doesn't explain why it solves the problem or should be the selected answer. We should educate along with helping solve the problem. – the Tin Man Jan 29 '22 at 22:59

React) State in useState can't receive value

3 Answers3