En mi proyecto de reacción, tengo una matriz de objetos donde quiero obtener el valor de una clave en la matriz y almacenarla dentro de un estado separado, luego mapearla y usar los valores en mi proyecto. En este caso, quiero obtener las primeras 10 cadenas en delivery_time_frame. Estoy usando substr para almacenar el valor dentro de una matriz vacía después del filtrado, pero mi código no funciona en este momento.
Aquí está mi código en este momento y los códigos y caja aquí códigos y caja
import "./styles.css"; import React, { useEffect, useState, useRef } from "react"; export default function App() { const Defaultdata = [ { date_listed: "4 hours ago", id: "7857699961", delivery_time_frame: "2021-10-25 - 2021-11-14", distance: "22.8 km", time_stamp: "2021-10-25 16:36:54", watched: "yes" }, { date_listed: "3 days ago", id: "8358962006", delivery_time_frame: "2021-10-18 - 2021-10-24", distance: "4.3 km", time_stamp: "2021-10-22 16:54:12" }, { date_listed: "4 hours ago", delivery_id: "8146462294", delivery_time_frame: "2021-10-25", distance: "4.3 km", time_stamp: "2021-10-25 16:12:32" }, { date_listed: "4 hours ago", delivery_id: "8146462294", delivery_time_frame: "2021-10-25 - 2021-10-31", distance: "4.3 km", time_stamp: "2021-10-25 16:12:32" }, { date_listed: "4 hours ago", delivery_id: "8146462294", delivery_time_frame: "2021-10-25 - 2021-11-14", distance: "4.3 km", time_stamp: "2021-10-25 16:12:32" } ]; const next_level2 = Defaultdata.filter((d, i) => { return d.delivery_time_frame.substr(0, 10); }); const [specificdatevalues, setspecificdatevalues] = useState([]); useEffect(() => { setspecificdatevalues([...specificdatevalues, next_level2]); }, []); return ( <div className="App"> {specificdatevalues.map((dates, i) => ( <li>{dates}</li> ))} </div> ); }Ok, entonces tienes algunos problemas aquí.
next_level2 cuando configuraste el estado,key siempre que renderice en una función de bucle.Con algunas correcciones, debería verse así:
// Would suggest sticking to camel-case naming conventions. const [specificDateValues, setSpecificDateValues] = useState([]); useEffect(() => { // You forgot to spread `next_level2`, resulting in a 2D array. setspecificdatevalues([...specificDateValues, ...next_level2]); }, []); return ( <div className="App"> {specificDateValues.map((dates, i) => ( // You can't simply render an object like this. // Should add a `key` value whenever you render in a loop function. <li key={i}> <span>{dates.time_stamp}</span> <span>{dates.distance}</span> <span>{delivery_time_frame}</span> ... </li> ))} </div> Hay algunos cambios estructurales que haría en términos de mejores prácticas, etc.
Yo diría que esto es lo suficientemente bueno para hacer que lo que sea que estés tratando de hacer funcione aquí.
Aparte de eso, sugeriría seguir aprendiendo, practicando y siguiendo las convenciones y métodos conocidos.
Creo que desea usar .map() en lugar de .filter() al obtener next_level2. De esta manera tendrá fechas en su nueva matriz. Además, establezca el estado solo con next_level2, ya que esta difusión del estado anterior no tiene sentido en este fragmento de código y no es una buena práctica (si desea usar prevSomeState, realice una devolución de llamada en setSomeState).