¿Puede alguien ayudarme a actualizar los datos de respuesta al hacer clic en el elemento de la lista? Entonces, hay una lista de productos que se vinculan en <li> . Cuando el usuario hace clic en cualquiera de los elementos de la lista, el valor se agregará como una palabra clave en la API y los datos se procesarán en consecuencia.
class SearchFilter extends Component { constructor(props) { super(props); this.state = { sidefilterbyProductData: [], sidefiltersbyContentType: [], featuredData: [], resourceData: [], othersData: [], error: false, }; } componentDidMount() { axios .getAll() .then((response) => { this.setState({ sidefilterbyProductData: response.data.data.filter_by[1].input_list, sidefiltersbyContentType: response.data.data.filter_by[0].input_list, featuredData: response.data.data.primary_data, resourceData: response.data.data.resources, othersData: response.data.data.others, }); }) .catch((error) => { this.setState({ error: true, }); }); } handleonClick = () => { axios.get(`${this.key}`) .then((response) => { this.setState({ featuredData: response.data.data.primary_data, resourceData: response.data.data.resources, othersData: response.data.data.others, }); }) .catch((error) => { this.setState({ error: true, }); }); } render() { return <div><h3>Filter by product</h3> <ul> {Object.keys(this.state.sidefilterbyProductData).map((key, i) => ( <li key={key}><a onClick={this.handleonClick()}>{this.state.sidefilterbyProductData[key]}</a></li> ))} </ul></div>; }Primero, no está claro cuál es su problema, si se trata de una lógica para implementarlo, o si es un error o algo más ... sea bienvenido a complementar su pregunta si lo desea.
Entonces vamos.
Por lo general, no trabajo componentes como este como componentes de clase, sin embargo, al analizar su código, podría agregar un parámetro en la función handleonClick , algo como:
class SearchFilter extends Component { constructor(props) { super(props); this.state = { sidefilterbyProductData: [], sidefiltersbyContentType: [], featuredData: [], resourceData: [], othersData: [], error: false, }; } componentDidMount() { // Is it needed ? } searchInApi = async (search:string): Promise<Foo[]> => { const response = await axios.get("/api/v1/products", { withCredentials: true, params: [ 'search' : search ] }); return response.data; } handleonClick = (search:string): => { searchInApi(search) .then((response) => { this.setState({ featuredData: response.data.data.primary_data, resourceData: response.data.data.resources, othersData: response.data.data.others, }); }) .catch((error) => { this.setState({ error: true, }); }); } render() { return ( <div> <h3>Filter by product</h3> <ul> {Object.keys(this.state.sidefilterbyProductData).map((key, i) => ( <li key={key}><a onClick={this.handleonClick()}>{this.state.sidefilterbyProductData[key]}</a></li> ))} </ul> </div> ); } }Puede separar las responsabilidades dividiendo su código en dos componentes, uno contendrá la búsqueda en la lógica API y el otro que representará sus componentes front-end.