如何在我的第二个选择中加载数据?

huangapple go评论95阅读模式
英文:

How can I load data in my select number two?

问题

这是您要翻译的内容:

I have a select that loads the information from my api without problems but I need to do the same with my other select that comes with react-windowed-select but I have not succeeded since this type of select allows me to load large lists and renders better On the other hand, the normal select of react when fetching large lists becomes very slow.

normal select working:
https://codesandbox.io/s/quizzical-jasper-6j6rvl?file=/src/App.js:0-1019

import React, { useState, useEffect } from "react";

function App() {
  const [t4t, setUniversidad] = useState([]);

  useEffect(() => {
    const interval = setInterval(() => {
      const getcountry2 = async () => {
        const req = await fetch(
          `https://aliraweb.com/apiAlira2/cargar_empleados/nombre_trabajador.php?id_empresa_usuario=30`
        );
        const getres2 = await req.json();
        setUniversidad(await getres2);
      };
      getcountry2();
    }, 2000);
    return () => setInterval(interval);
  }, []);

  return (
    <div className="App">
      <select
        // name="t4"
        className="form-select"
      >
        <option>--Seleccione --</option>
        {t4t.map((getcon2) => (
          <option key={getcon2.id} value={getcon2.name}>
            {" "}
            {getcon2.documento} - {getcon2.name}{" "}
          </option>
        ))}
      </select>

      <br />
      {/*  <input type="text"  value={getcon2.documento} />*/}
    </div>
  );
}

export default App;

This is my other select "react-windowed-select" in which I want it to do the same as the previous one, that is, to load the database from the api but I haven't been able to do it.

https://codesandbox.io/s/loving-darkness-5844h6?file=/src/App.jsx:0-790

import React, { useState, useEffect } from "react";
import WindowedSelect from "react-windowed-select";

function App() {
  const [t4t, setUniversidad] = useState([]);

  useEffect(() => {
    const interval = setInterval(() => {
      const getcountry2 = async () => {
        const req = await fetch(
          `https://aliraweb.com/apiAlira2/cargar_empleados/nombre_trabajador.php?id_empresa_usuario=30`
        );
        const getres2 = await req.json();
        setUniversidad(await getres2);
      };
      getcountry2();
    }, 2000);
    return () => setInterval(interval);
  }, []);

  //opciones
  const options = [];

  return (
    <div>
      <div class="col-12">
        <br />

        <WindowedSelect options={options} />
      </div>
    </div>
  );
}
export default App;

请注意,您提供的内容中包含了一些HTML和代码片段,我已经将其保留在翻译中。如果您有任何其他需要,请随时提出。

英文:

I have a select that loads the information from my api without problems but I need to do the same with my other select that comes with react-windowed-select but I have not succeeded since this type of select allows me to load large lists and renders better On the other hand, the normal select of react when fetching large lists becomes very slow.

normal select working:
https://codesandbox.io/s/quizzical-jasper-6j6rvl?file=/src/App.js:0-1019

import React, { useState, useEffect } from &quot;react&quot;;

function App() {
  const [t4t, setUniversidad] = useState([]);

  useEffect(() =&gt; {
    const interval = setInterval(() =&gt; {
      const getcountry2 = async () =&gt; {
        const req = await fetch(
          `https://aliraweb.com/apiAlira2/cargar_empleados/nombre_trabajador.php?id_empresa_usuario=30`
        );
        const getres2 = await req.json();
        setUniversidad(await getres2);
      };
      getcountry2();
    }, 2000);
    return () =&gt; setInterval(interval);
  }, []);

  return (
    &lt;div className=&quot;App&quot;&gt;
      &lt;select
        // name=&quot;t4&quot;
        className=&quot;form-select&quot;
      &gt;
        &lt;option&gt;--Seleccione --&lt;/option&gt;
        {t4t.map((getcon2) =&gt; (
          &lt;option key={getcon2.id} value={getcon2.name}&gt;
            {&quot; &quot;}
            {getcon2.documento} - {getcon2.name}{&quot; &quot;}
          &lt;/option&gt;
        ))}
      &lt;/select&gt;

      &lt;br /&gt;
      {/*  &lt;input type=&quot;text&quot;  value={getcon2.documento} /&gt;*/}
    &lt;/div&gt;
  );
}

export default App;

This is my other select "react-windowed-select" in which I want it to do the same as the previous one, that is, to load the database from the api but I haven't been able to do it.

https://codesandbox.io/s/loving-darkness-5844h6?file=/src/App.jsx:0-790

import React, { useState, useEffect } from &quot;react&quot;;
import WindowedSelect from &quot;react-windowed-select&quot;;

function App() {
  const [t4t, setUniversidad] = useState([]);

  useEffect(() =&gt; {
    const interval = setInterval(() =&gt; {
      const getcountry2 = async () =&gt; {
        const req = await fetch(
          `https://aliraweb.com/apiAlira2/cargar_empleados/nombre_trabajador.php?id_empresa_usuario=30`
        );
        const getres2 = await req.json();
        setUniversidad(await getres2);
      };
      getcountry2();
    }, 2000);
    return () =&gt; setInterval(interval);
  }, []);

  //opciones
  const options = [];

  return (
    &lt;div&gt;
      &lt;div class=&quot;col-12&quot;&gt;
        &lt;br /&gt;

        &lt;WindowedSelect options={options} /&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  );
}
export default App;

答案1

得分: 1

以下是翻译好的部分:

import React, { useState, useEffect } from "react";
import WindowedSelect from "react-windowed-select";

function App() {
  const [t4t, setUniversidad] = useState([]);

  useEffect(() => {
    (async () => {
      const req = await fetch(
        `https://aliraweb.com/apiAlira2/cargar_empleados/nombre_trabajador.php?id_empresa_usuario=30`
      );
      const getres2 = await req.json();
      setUniversidad(await getres2);
    })();
  }, []);

  // 这里是转换部分
  const options = t4t.map((item) => ({ label: item.name, value: item.id }));

  return (
    <div>
      <div className="col-12">
        <br />
        <WindowedSelect options={options} />
      </div>
    </div>
  );
}
export default App;

希望这对您有所帮助!如果您有任何其他翻译需求,请随时告诉我。

英文:

You should transform the data to the shape that react-windowed-select library accepts. In your example:

import React, { useState, useEffect } from &quot;react&quot;;
import WindowedSelect from &quot;react-windowed-select&quot;;

function App() {
  const [t4t, setUniversidad] = useState([]);

  useEffect(() =&gt; {
    (async () =&gt; {
      const req = await fetch(
        `https://aliraweb.com/apiAlira2/cargar_empleados/nombre_trabajador.php?id_empresa_usuario=30`
      );
      const getres2 = await req.json();
      setUniversidad(await getres2);
    })();
  }, []);

  // Here is the transformation
  const options = t4t.map((item) =&gt; ({ label: item.name, value: item.id }));

  return (
    &lt;div&gt;
      &lt;div class=&quot;col-12&quot;&gt;
        &lt;br /&gt;

        &lt;WindowedSelect options={options} /&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  );
}
export default App;

huangapple
  • 本文由 发表于 2023年8月11日 00:09:57
  • 转载请务必保留本文链接:https://go.coder-hub.com/76877548.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定