Tengo una aplicación de reacción y una función de búsqueda. Pero ahora trato de implementar redux con la aplicación. Así que si cargo la aplicación no hay errores. Pero si solo escribo algo en el cuadro de búsqueda, aparece este error:
TypeError: searchfield.toLowerCase is not a function //const { robots, searchfield } = this.state; 44 | //const {searchField, onSearchChange} = props; 45 | const filteredRobots = robots.filter(robot => { > 46 | return robot.name.toLowerCase().includes(searchfield.toLowerCase()); | ^ 47 | }); 48 | return !robots.length ? 49 | <h1>Loading</h1> :Así que esto es app.js:
const mapStateToProps = state => { return { searchField: state.searchfield } }; const mapDispatchToProps = dispatch => { return { onSearchChange: (event) => dispatch(setSearchField(event.target.value)) } } function App(props) { const [robots, robotState] = useState([]); const [searchfield, stateSearchField] = useState(''); useEffect(() => { fetch('https://jsonplaceholder.typicode.com/users') .then(response => response.json()) .then(users => { robotState(users) }); }, []); const filteredRobots = robots.filter(robot => { return robot.name.toLowerCase().includes(searchfield.toLowerCase()); }); return !robots.length ? <h1>Loading</h1> : ( <div className='tc'> <h1 className='f1'>RoboFriends</h1> <SearchBox searchChange={stateSearchField} /> <Scroll> <CardList robots={filteredRobots} /> </Scroll> </div> ); } export default connect(mapStateToProps, mapDispatchToProps)(App);reductor.js:
import { CHANGE_SEARCH_FIELD } from './constants.js'; const initialState = { searchField: '' } export const searchRobots = (state = initialState, action = {}) => { switch (action.type) { case CHANGE_SEARCH_FIELD: return Object.assign({}, state, { searchField: action.payload }); default: return state; } }acciones.js
import {CHANGE_SEARCH_FIELD} from './constants' export const setSearchField = (text)=> ({ type: CHANGE_SEARCH_FIELD, payload: text });cuadro de búsqueda.js
import React from 'react'; const SearchBox = ({ searchfield, searchChange }) => { return ( <div className='pa2'> <input className='pa3 ba b--green bg-lightest-blue' type='search' placeholder='search robots' onChange={searchChange} /> </div> ); } export default SearchBox;mi pregunta: que tengo que cambiar?
Gracias
stateSearchField es la función responsable de registrar/actualizar el valor de la variable de campo de useState searchfield La causa de este problema es que no está actualizando los valores correctamente a medida que se proporciona/actualiza la entrada. Los apoyos searchChange del componente SearchBox apuntan a stateSearchField que se activa aún más cuando se cambia el valor de entrada. Pero el problema aquí es que el valor de entrada no se pasa al actualizar el estado, por lo tanto, está configurando el valor del campo de searchfield en undefined , y en la función de filter está intentando invocar el método toLowerCase() en el campo de searchfield que es undefined . La solución es bastante simple, simplemente pase el valor de entrada cada vez que se cambie la entrada. Esto se puede hacer en el componente SearchBox .
import React from 'react'; const SearchBox = ({ searchfield, searchChange }) => { return ( <div className='pa2'> <input className='pa3 ba b--green bg-lightest-blue' type='search' placeholder='search robots' onChange={e=>searchChange(e.target.value)} //accept the event argument and pass the extracted value from the input to searchChange prop function. /> </div> ); } export default SearchBox;O use una función de controlador para lograr lo mismo,
import React from 'react'; const SearchBox = ({ searchfield, searchChange }) => { function updateInput(e){ searchChange(e.target.value) } return ( <div className='pa2'> <input className='pa3 ba b--green bg-lightest-blue' type='search' placeholder='search robots' onChange={updateInput} /> </div> ); } export default SearchBox;