反应代谢显示为空



当用户单击组件时,我向我的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>

相关内容

  • 没有找到相关文章

最新更新