Actualizar la tabla antd al cambiar la fuente de datos.

Tengo una página que contiene un componente de barra de búsqueda y un componente de tabla de antd, y quiero que mi tabla de antd se actualice cada vez que cambie el origen de datos o cuando realizo una búsqueda en la barra de búsqueda. Por ahora, mi tabla solo se actualiza cuando actualizo la página, por lo que agregué un window.location.reload() a mi función onSearch para que funcione como se desea, pero quiero que se actualice sin tener que actualizar toda la página. ¿Hay alguna manera de hacer eso?

Aquí está mi archivo table.js

export default function Table() { const [dataSource, setdataSource] = useState([]); const [loading,setLoading] = useState(false); useEffect(() => { setLoading(true); fetch(`${apiEndpoint}/api/managed-list`) .then((response) => response.json()) .then((data) => { setdataSource(data); console.log(data); }) .catch((err) => { console.log(err); }) .finally(() => { setLoading(false); }); }, []); return ( <div> <table bordered="{true}" loading="{loading}" columns="{columns}" datasource="{dataSource}" pagination="{true}"></table> </div> ); }

Aquí está mi archivo searchbar.js

davy.ai

July 16, 2023 at 12:10 am

Para actualizar el componente Tabla de Antd sin refrescar toda la página, puedes utilizar la gestión del estado de React. Mueve el código de llamada a la API desde el gancho useEffect en Table.js a una función separada, por ejemplo getTableData. Luego, llama a esta función cada vez que cambie la fuente de datos o se realice una búsqueda.

Aquí está el código actualizado:

export default function Table() {
  const [dataSource, setdataSource] = useState([]);
  const [loading, setLoading] = useState(false);

  const getTableData = () => {
    setLoading(true);
    fetch(`${apiEndpoint}/api/managed-list`)
      .then((response) => response.json())
      .then((data) => {
        setdataSource(data);
        console.log(data);
      })
      .catch((err) => {
        console.log(err);
      })
      .finally(() => {
        setLoading(false);
      });
  }

  useEffect(() => {
    getTableData();
  }, []);

  // Llama a getTableData cada vez que dataSource cambie o se realice una búsqueda
  useEffect(() => {
    getTableData();
  }, [dataSource, searchedText]);

  return (
    <div>
      <table bordered="{true}" loading="{loading}" columns="{columns}" datasource="{dataSource}" pagination="{true}"></table>
    </div>
  )
}

function SearchBar() {
  const [searchedText, setSearchedText] = useState("");
  let navigate = useNavigate();

  const onSearch = () => {
    navigate(`/search?q=${searchedText}`)
    setdataSource([]); // limpiar los datos existentes para buscar los nuevos datos desde la API de búsqueda
    console.log(searchedText)
    fetch(`${apiEndpoint}/api/search`,{ // asumiendo que esta es tu endpoint de búsqueda de API
      method: 'POST',
      body: JSON.stringify({
        content: searchedText
      }), headers:{"Content-type":"application/json; charset=UTF-8",'Accept': 'application/json'}
    }).then(response => response.json())
      .then(data => {
        setdataSource(data);
        console.log(data);
      });
  };

  return (
    <div>
      <input.search placeholder="Ingrese el nombre de la empresa o palabra clave..." onchange="{(e)" ==""> {
          setSearchedText(e.target.value);
        }}
        onSearch={onSearch}
        onPressEnter={onSearch}
        enterButton >
      </input.search>
    </div>
  );
}
export default SearchBar;

En el código actualizado, se define una nueva función getTableData para hacer la llamada a la API y actualizar el estado de la variable dataSource. Se definen dos ganchos useEffect separados, uno para llamar a getTableData al cargar la página y otro para llamarlo cada vez que dataSource o searchedText cambien. En la función onSearch de SearchBar, se agrega la llamada setdataSource([]) para borrar los datos existentes antes de obtener nuevos datos de la API de búsqueda.

es.davy.ai

¿Tienes una pregunta?

Actualizar la tabla antd al cambiar la fuente de datos.

Answer

davy.ai