javascript - 获取数据时useEffect问题不起作用
问题描述
我使用 useEffect 在反应功能组件中获取数据,它必须在数据(useState)中获取数据,所以问题是页面加载正确,在 api res 中没有问题。
function AdminDashBoard() {
const [data, setData] = useState([]);
const [selectedOption, setselectedOption] = useState("");
const [c_options, setc_options] = useState([]);
useEffect(() => {
axios.get("http://localhost:8000/products")
.then(response => { setData(response.data.result); })
.then(
() => {
data.forEach(element => {
let options = [];
if (options.indexOf(element.category) < 0) options += { value: element.category, label: element.category };
setc_options(options);
})
}
)
.catch(err => { console.log(err) })
}, [])
function handleSelectChange(event) {
setselectedOption(event.target.value);
console.log("selected category : ")
console.log(selectedOption)
}
return (
<div class="row-fluid main">
<div className="form-group">
<label for="formControlSelect2">select category :</label>
<Select class="form-control" id="formControlSelect2" onChange={() => handleSelectChange} options={c_options} />
</div>
<span id="products"></span>
</div>
);
}
export default AdminDashBoard;
解决方案
write another useEffect and put data dependency in an array and clean up second then in your useEffect becaucse that is unnesseary
useEffect(() => {
const oldDtate=[...data]
oldDtate.forEach(element => {
let options = [];
if (options.indexOf(element.category) < 0) options += { value:
element.category, label: element.category };
setc_options(options)
}, [data])
推荐阅读
- ruby - ActiveStorage 间歇性地返回“找不到带有 'id' 的 ActiveStorage::Blob”
- java - 如何使用空检查连续制作java 8 Stream map
- javascript - 发布 psajax.php 404
- git - 如何将错误修复分支合并到主分支?
- java - 当您在片段中打开新活动时,应用程序会停止
- centos - 在 Virtual Box 中运行的 CentOS 中鼠标停止单击
- css - magenta.js Visualizer() 呈现模糊的笔记
- javascript - 打字稿抱怨显式类型没有索引签名
- kubernetes - 在 Kubernetes 上设置 glusterfs 时出错:volume create: heketidbstorage: failed: Host not connected
- php - 将 laravel 供应商文件夹上传到 cpanel 时出错