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] ?

CodePudding user response：

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

CodePudding user response：

//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)
    };