Tengo una barra de navegación en mi proyecto que es común para todos y tiene un campo de entrada de texto.

<input
    placeholder="Search Assets"
    type="text"
    id="searchTerm"
    onChange={this.searchAsset}
    value={this.state.searchValue}
/>

Y función onChange estoy redirigiendo a la página de la biblioteca

searchAsset = event => {
    const searchValue = event.target.value;
    this.setState({ searchValue });
    if (searchValue.trim().length > 2) {
      this.props.history.push(`/company/library?q=${searchValue}`);
    }
  };

Y en la página de la biblioteca estoy llamando a la acción de búsqueda en componentDidMount ()

componentDidMount() {
    const params = new URLSearchParams(this.props.location.search);
    const q = params.get('q');
    this.setState({ searchValue: q });
    this.props.actions.searchAssets({ page: 0, searchString: q });
  }

Ahora el problema es cada vez que vuelvo a buscar: supongamos que inicialmente busqué "imagen" y, después de obtener el resultado, eliminé el texto en la navegación superior y nuevamente busqué el texto "descargar". No obtengo ninguna respuesta del backend.

Ahora mismo quiero solucionar este problema con

componentDidUpdate(prevProp, prevState) {
    const params = new URLSearchParams(this.props.location.search);
    const q = params.get('q');
    if (q !== prevState.searchValue) {
      this.props.actions.searchAssets({ page: 0, searchString: q });
    }
  }

Y recibo el error Se superó la profundidad máxima de actualización. Esto puede suceder cuando un componente llama repetidamente a setState dentro de componentWillUpdate o componentDidUpdate.

2
chaitanya gupta 15 mar. 2021 a las 10:12

1 respuesta

La mejor respuesta

Problema

Su versión de componentDidUpdate no coincide del todo con la versión de componentDidMount. Siempre compara q con prevState.searchValue pero no actualiza el estado, por lo que la comparación es falsa en la próxima actualización. q !== prevState.searchValue nunca da como resultado falso y parece poner en cola un montón de acciones que dan como resultado un bucle de renderizado.

Solución

Almacene en caché el resultado de la búsqueda actual para la siguiente comparación de actualización de estado, de modo que el efecto se ejecute solo cuando llegue una consulta de búsqueda nueva .

componentDidUpdate(prevProp, prevState) {
  const params = new URLSearchParams(this.props.location.search);
  const q = params.get('q');
  if (q !== prevState.searchValue) {
    this.setState({ searchValue: q }); // <-- update state with search value
    this.props.actions.searchAssets({ page: 0, searchString: q });
  }
}
2
Drew Reese 15 mar. 2021 a las 07:25