Quiero mostrar los detalles de la publicación en la interfaz. mi api muestra el detalle posterior como se muestra a continuación capturado en cartero:
"message": "Posts fetched successfully!", "posts": { "_id": "61f05f676793d49f466e7aaa", "title": "Liberal Arts Student Sample", "content": "The three-page.", "creator": { "_id": "61cd99efa0b8d616a7a53ce1", "createdAt": "2021-12-30T11:37:19.041Z", "updatedAt": "2022-01-06T14:35:48.801Z", "__v": 0, "bio": "user bio", "name": "username" }, "Comments": [], "created": "2022-01-25T20:36:55.095Z", "createdAt": "2022-01-25T20:36:55.096Z", "updatedAt": "2022-01-25T20:36:55.096Z", "__v": 0 } }Quiero exhibir los detalles de esta publicación en la interfaz y aquí está el código:
export default function PostDetail() { const { postId } = useParams(); const post = useSelector((state) => state.post) const dispatch = useDispatch(); const { title, content,creator, created } = post; const fetchPostDetail = async (id) => { const response = await axios.get(`http://localhost:5000/api/articles/post/${id}`, { post }) .catch(err => { console.log(err); }) dispatch(selectedPost(response.data.posts)); } useEffect(() => { fetchPostDetail(postId) }, []) return ( <div> <h1>Post Detail</h1> <div> <h2>{title}</h2> <i>posted in {created}</i> <li>Created by {creator.map((m,i)=>( <b key={i}>{m.name}</b> ))}</li> <p>{content}</p> </div> </div> ); }Hay tres errores:
si silencio el
como puedo solucionar eso gracias de antemano
Por primera vez, cuando se monte el componente, el valor del creador no estará definido. Debe agregar una verificación antes de obtener el valor anidado.
<div> <h1>Post Detail </h1> <div> <h2>{title} </h2> <i> posted in {created} </i> {creator && <li> Created by :{creator.name}</li>} <p> {content} </p> </div> </div>Nota: Una cosa más, Creator no es una matriz. es un Objeto. Entonces no puedes mapear el objeto. En caso de que sea una matriz, también debe realizar la verificación anterior en ese caso.
asegúrese de que el objeto de la publicación contenga la clave "creador", y no necesita map() si el estado se ve exactamente como la respuesta de la API. Si pudiera mostrar cómo se ve el estado, eso revelará más del problema.
Aquí, el creador es un Objeto. Mientras que la función .map es para Array. Para mapear un objeto, puede verificar: función de mapeo para objetos (en lugar de matrices)