Estoy desarrollando una aplicación que tiene una barra de búsqueda: cuando el usuario escribe algo, se realiza una llamada a la API y se devuelve el json. En el código a continuación, una matriz llamada sampleList representa este json. Luego, el json se pasa al componente Lista para representar una lista simple. Esto es lo que hice, sin embargo no funciona. Soy un principiante en reaccionar y tengo dos preguntas principales:
Aquí está el código: Searchbar.tsx
const sampleList = [ { id: 1, name: "a"}, { id: 2, name: "b"}, ]; const Searchbar = () => { const onSubmit = (e) => { sampleList = getJson(); } return ( <form className="search-form" onSubmit={onSubmit}> <input type="text"></input> <input type="submit"></input> </form> <List prop={sampleList}/> )}Lista.tsx
const List = ({sampleList}) => { return( <div> sampleList.map((item, index) => <div key={item.id}> {item.name} </div> ) </div> )}Cualquier ayuda sería muy apreciada.
const List = ({ prop }) => { return( <div> prop.map((item, index) => <div key={item.id}> {item.name} </div> ) </div> )} El atributo prop será la clave de su valor simpleList . El parámetro de su componente List será un objeto json que contiene claves y valores como su clave de prop . También puede cambiar el nombre de su atributo prop para colocar la list , por ejemplo.
Si desea mostrar el componente Lista cuando el usuario hace clic en un botón de búsqueda, puede usar la propiedad state . Espero que este enlace te ayude: https://reactjs.org/docs/state-and-lifecycle.html
Idealmente, querrá mantener dos estados dentro de la barra de búsqueda.
En pocas palabras, cada vez que se actualiza un estado, el componente volverá a representar e hidratará los nuevos valores como presentes en ese estado.
const Searchbar = () => { const [searchResults, setSearchResults] = useState([]); const [searchComplete, setSearchComplete] = useState(false); const onSubmit = async (e) => { const sampleList = await getJson(); setSeatchResults(sampleList); // This will cause a state update and then pass the property along to the list component setSearchComplete(true); // This enable showing the list component now that the search is complete }; return ( <form className="search-form" onSubmit={onSubmit}> <input type="text"></input> <input type="submit"></input> </form> { searchComplete && <List prop={searchResults} /> } ); }En cuanto al componente de la lista, su código se ve bien. Solo necesita cambiar el nombre de sampleList a prop mientras pasa los resultados de la búsqueda como prop en el componente anterior
const List = ({prop}) => { return ( <div> prop.map((item, index) => <div key={item.id}> {item.name} </div> ) </div> ); };Un consejo, siempre use async-await cuando haga llamadas a apis. Y asegure un buen manejo de errores para evitar todos los escenarios.