Creé dos componentes en React, <Search /> y <List /> que son hijos de <App /> .
Cuando se hace clic en un botón en <Search /> , quiero obtener algo de una API y mostrar los resultados en <List /> . Si bien conseguí que esto funcionara haciendo la búsqueda dentro de <App /> y pasando la respuesta como accesorio a <List /> , preferiría encapsular la búsqueda dentro <List /> .
Desafortunadamente, estoy teniendo dificultades para encontrar una manera de hacer esto. 'The React way' probablemente sería hacer esto a través de un paso de apoyo inteligente, pero no he encontrado una manera ordenada de hacerlo, incluso un booleano 'shouldFetch' necesitaría restablecerse después de la búsqueda, lo que parece engorroso y se desencadenaría renders innecesarios.
Esta respuesta usa refs para algo similar que podría funcionar, pero en realidad dudo un poco en probarlo ya que las refs parecen estar un poco sucias, según los documentos de React, ya que "modifican imperativamente a un niño fuera del flujo de datos típico".
¿Cómo puedo indicarle a mi componente <List /> que haga algo después de hacer clic en un botón en <Search /> ?
Si es necesario, puedo proporcionar el código, pero espero que esta pregunta sea más simple de lo que me parece.
Una opción natural sería crear una variable booleana de estado en <App /> , activada cuando se presiona un botón en <Search /> y luego usar algo de lógica en <List /> para obtener datos cuando el estado booleano pasó de false a true .
Por ejemplo:
class App extends React.Component { constructor() { super(); this.state = { fetchData: false } } render() { return ( <div> <Search onClick={() => this.setState({fetchData: true})} /> <List shouldFetch={this.state.fetchData} onFetch={() => this.setState({fetchData: false})} /> </div> ) } } Luego, en su componente <List /> :
class List extends React.Component { componentWillReceiveProps(nextProps) { if ( !this.props.shouldFetch && nextProps.shouldFetch ) { // Fetch data here and set it in state, for example // After fetch, don't forget to call onFetch() to reset the boolean } } ... // more code } Aunque esto funcionará, no está mal usar <App /> como fuente de datos. De esta manera, puede abstraer componentes puros que solo manejan la interfaz de usuario pero no tienen lógica de red. Suele ser un buen modelo y le ayuda a reutilizar componentes en el futuro.
Este será un buen momento para usar una tienda, que mantendrá todo el estado de su aplicación como un solo objeto JS. Flux, Redux son 2 excelentes arquitecturas que complementan a React. Básicamente, sus componentes escuchan los cambios en la tienda, cada vez que se lleva a cabo una acción (hacer una llamada a la API, hacer clic, etc.), la tienda se actualiza y la interfaz de usuario cambia. Una aplicación de reacción a gran escala puede volverse muy complicada de manejar con muchos niños.
También estoy completamente de acuerdo con la respuesta anterior, deje que el componente <List /> no tenga estado y solo se represente en función de los accesorios. Por lo tanto, tener las funciones escritas en la <App/> principal y que los datos se transmitan es una buena idea.