当用户单击组件时,我向我的fetch_description发出get请求,该请求返回此确切响应:
[{"Descrizione":"test1"},{"Descrizione":"test2"}]
我想要的是把响应中的内容放进我的模态中。在我的console.log(result.data(中,数据显示正确,所以我认为我的问题在operationList.js中,在map函数中,但我不明白哪里出了问题。
然而,我得到的模式是显示空列表
<li>
我的代码在这里:
Calendar.js
const Calendar = () => {
const [show, setShow] = useState(false);
const [operations, listOperations] = useState([]);
return (
<>
<FullCalendar
plugins={[listDayPlugin]}
timeZone="local"
locale="it"
initialView="listDay"
events="http://localhost:5000/parse_appointments"
eventClick =
{
function(arg){
Axios.get("http://localhost:5000/fetch_description", {
params: {
id: arg.event.id
}
})
.then(
(result) => {
listOperations(result.data);
setShow(true);
console.log(result.data);
}
)
.catch(err => console.log(err))
}
}
/>
<Modal show={show} onHide={() => setShow(false)}>
<Modal.Header>Hi</Modal.Header>
<Modal.Body>
<div>
{ operations ?
(
<TodoList operations={operations}/>
)
:
(
<h1> Loading</h1>
)
}
</div>
</Modal.Body>
<Modal.Footer>This is the footer</Modal.Footer>
</Modal>
</>
);
};
export default Calendar;
operationList.js
const TodoList = ({ operations }) => {
return (
<ul>
{operations.map((operation) => (
<li
key={operation.Descrizione}
>
</li>
))}
</ul>
);
};
export default TodoList;
您的"操作";变量被初始化为null,这不包括"0";地图";作用
您可以在useState函数调用中将其初始化为空数组,如下所示:
const [operations, listOperations] = useState([]);
你也没有在你的";李;标签;键";属性不呈现任何文本,您必须将其放入标记中,如下所示:
const TodoList = ({ operations }) => {
return (
<ul>
{operations.map((operation) => (
<li
key={operation.Descrizione}
>
{operation.Descrizione}
</li>
))}
</ul>
);
};
export default TodoList;
ApiCall之后的回调看起来也有点错误,所有代码都应该在回调函数中,如下所示:
.then(
(result) => {
listOperations(result.data);
setShow(true);
}
)
这看起来有点错误:
.then(
(result) => {listOperations(result.data)},
setShow(true)
)
它应该是:
.then(
(result) => {
listOperations(result.data);
setShow(true);
}
)
很尴尬,但我得到了错误:
在我的operationList.js中,我有
<li key={operation.Descrizione}>
</li>
它基本上创建了空列表,所以我改为:
<li key={operation.Descrizione}>
{operation.Descrizione}
</li>