【发布时间】：2021-11-26 11:32:41
【问题描述】：
我有一个问题，当我在本地填充变量时，我的代码工作正常。但是，一旦我开始数据库调用，循环内的函数就不再起作用。该功能确保卡片可以打开或关闭。 （见例子）
如何通过数据库调用使用循环内的函数？
示例：https://codepen.io/CreativeBulma/pen/YbQqoQ
如果我将数据存储在一个变量中，这个函数也可以循环工作，如下 const
[trainingData, setTrainingData] = useState([
{
...
},
{
...
}
]);
但是，一旦我进行数据库调用并以这种方式写入数据，就没有任何效果了 setTrainingData(res.data);也就是说，当我使用函数 getTrainingData() 调用数据时。
所以只要我用数据库填满const trainingData，就没有任何效果了。
没用
//database call
const [trainingData, setTrainingData] = useState([]);
const getTrainingData = () => {
axios
.get(`${process.env.REACT_APP_API_URL}/team/team_training-${teamid}`,
)
.then((res) => {
if (res.status === 200) {
if (typeof res.data !== 'undefined' && res.data.length > 0) {
// the array is defined and has at least one element
setIsTrainingExisting(true)
setTrainingData(res.data); // The data is the same as the working code
console.log(res.data)
}
else {
setIsTrainingExisting(false)
}
}
})
.catch((error) => {
//console.log(error);
});
}
// Console.log(res.data) give me the following output
/*
[
{
"von": "17:00",
"bis": "18:00",
"tag": "Mittwoch",
"trainingsid": 46
},
{
"von": "15:00",
"bis": "19:00",
"tag": "Donnerstag",
"trainingsid": 47
}
]
*/
作品
// without database call
const [trainingData, setTrainingData] = useState([
{
"von": "17:00",
"bis": "18:00",
"tag": "Mittwoch",
"trainingsid": 46
},
{
"von": "15:00",
"bis": "19:00",
"tag": "Donnerstag",
"trainingsid": 47
}
]);
代码
import React, { useEffect, useRef, useState } from 'react'
import bulmaCollapsible from '@creativebulma/bulma-collapsible';
import axios from 'axios'
const teamid = (window.location.pathname).split("-")[1];
function Training() {
let collapsiblesRef = useRef(null);
useEffect(() => {
bulmaCollapsible.attach(".is-collapsible", {
container: collapsiblesRef.current
});
}, [])
useEffect(() => {
getTrainingData();
}, []);
const [isTrainingExisting, setIsTrainingExisting] = useState(false);
const [trainingData, setTrainingData] = useState([]);
/*const [trainingData, setTrainingData] = useState([
{
"von": "17:00",
"bis": "18:00",
"tag": "Mittwoch",
"trainingsid": 46
},
{
"von": "15:00",
"bis": "19:00",
"tag": "Donnerstag",
"trainingsid": 47
}
]);*/
const getTrainingData = () => {
axios
.get(`${process.env.REACT_APP_API_URL}/team/team_training-${teamid}`,
)
.then((res) => {
if (res.status === 200) {
if (typeof res.data !== 'undefined' && res.data.length > 0) {
// the array is defined and has at least one element
setIsTrainingExisting(true)
setTrainingData(res.data);
console.log(res.data)
}
else {
setIsTrainingExisting(false)
}
}
})
.catch((error) => {
//console.log(error);
});
}
return (
<div>
<div className="card">
<div className="card-content">
<div ref={collapsiblesRef} id="accordion_first">
{trainingData.map((d, i) =>
(
<div className="card" key={i}>
<header className="card-header">
<p className="card-header-title">
{d.tag}
</p>
<a href={"#collapsible-message-accordion-" + i.toString()} data-action="collapse" className="card-header-icon is-hidden-fullscreen" aria-label="more options">
<span className="icon">
<i className="fas fa-angle-down" aria-hidden="true"></i>
</span>
</a>
</header>
<div id={"collapsible-message-accordion-" + i.toString()} className="is-collapsible" data-parent="accordion_first">
<div className="card-content">
<p className="is-small has-text-primary has-text-weight-semibold">Tag</p>
<input className="input mb-5" style={{ width: "33%" }} type="text" placeholder="Wochentag" />
<p className="is-small has-text-primary has-text-weight-semibold">Uhrzeit von</p>
<input className="input mb-5" style={{ width: "33%" }} type="text" placeholder="Uhrzeit von" />
<p className="is-small has-text-primary has-text-weight-semibold">Uhrzeit bis</p>
<input className="input mb-5" style={{ width: "33%" }} type="text" placeholder="Uhrzeit bis" />
</div>
</div>
</div>
))}
</div>
</div>
</div>
<br />
<div>
<button className="button is-light"> <i class="fas fa-plus-circle"></i> Neu</button>
</div>
</div>
)
}
export default Training
【问题讨论】：
-
你指的是什么循环？问题/问题不清楚。
-
最后一段代码有一个循环。此循环适用于两种数据。但是，不起作用的是功能。展开或关闭。请参阅那里给出的示例以查看功能。
-
这只是映射您的状态数组。您的 codepen 中的代码也与您在问题中的代码 sn-ps 中询问的内容不匹配。什么不工作？能说的具体点吗？
-
显示您的所有代码文件，否则我们无法对您的错误做任何事情，对于给定的信息，这很不清楚。如果我不看 cmets，我就不会知道你的问题是什么
-
所以 CodePen 中的代码显示了函数应该是什么样子。地图应该能够折叠/展开，它与扩展
bulmaCollapsible一起使用。如果我将数据存储在一个变量中，此函数也可以循环工作，如下所示 const[trainingData, setTrainingData] = useState([ { ... }, { ... } ]);但是，一旦我进行数据库调用并像这样写入数据，就没有任何作用了setTrainingData(res.data);