英文:
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 "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;
答案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 "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);
})();
}, []);
// Here is the transformation
const options = t4t.map((item) => ({ label: item.name, value: item.id }));
return (
<div>
<div class="col-12">
<br />
<WindowedSelect options={options} />
</div>
</div>
);
}
export default App;
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论