¡Todo el mundo! Solo tengo este tipo de problema que no puedo solucionar.
esta es mi aplicación.js
import { useState } from "react" import Header from "./components/header" import FeedbackList from "./components/FeedbackList" import FeedbackData from "./data/FeedbackData" function App() { const [feedback, setFeedback] = useState(FeedbackData) return ( <> <Header /> <div className="container"> <FeedbackList feedback={feedback} /> </div> </> ) } export default Appy este es mi segundo archivo js en el que quiero usar un accesorio de "retroalimentación" como una matriz
import FeedbackItem from "./FeedbackItem" import FeedbackData from "../data/FeedbackData" function FeedbackList(feedback) { return ( <div> {feedback.map((item)=>( <FeedbackItem key={item.id} item={item}/> ))} </div> ) }No puedo usar la función feedback.map en este caso porque la retroalimentación no es como una matriz (perdón por mi mal inglés) Resuelvo este problema sin usar ganchos pero quiero saber qué puedo hacer en este caso, lo siento si estoy escribiendo algo mal. solo nuevo en React y tratando de aprender.
En Javascript hay objeto y matriz. Ambos pueden ser mapeados. Para matriz.
const arr = [ { name: "name 1", id: "01" }, { name: "name 2", id: "02" }, { name: "name 3", id: "03" }, ]; arr.map(item=> (<div key={item.id}>{item.name}</div>))Para Objeto.
const obj = { "item01": { name: "name 1" }, "item02": { name: "name 1" }, "item03": { name: "name 1" }, }; Object.keys(obj).map((key)=> <div key={key}>{obj[key].name}</div>) Compruebe su tipo, console.log(typeof FeedbackData) .
Si no es escriba error. En vez de
const [feedback, setFeedback] = useState(FeedbackData)Prueba esto.
const [feedback,setFeedback] = useState([]) useEffect(()=> setFeedback(FeedbackData),[])lo que quieres es desestructurar el accesorio que necesitas del objeto 'accesorios'.
function Component1() { const [val, setVal] = useState([]); return <Component2 val={val} /> } function Component2({ val }) { return val.map... }esto es equivalente a hacer:
function Component2(props) { return props.val.map... } esto se debe a que props es un objeto, por lo que debe obtener la clave correcta del objeto en función del nombre de prop, ya sea desestructurando o accediendo a él a través props.propName