React useEffect hook 不适用于 rails

Question

我正在使用反应钩子，但在这种情况下效果不起作用。如在控制台开始和结束不打印。我也在轨道项目中使用 react 。

import PropTypes from 'prop-types';
import React, { useState, useEffect } from 'react';
import { Link } from 'react-router-dom';
const DetailInterview = () => {
const [participants, setparticipants] = useState([])
const [interviews, setinterviews] = useState([])

async function fetchParticipantsList() {
fetch('/api/v1/participants').
then((response) => response.json()).
then((participants) => setparticipants({ participants }));
};
async function fetchInterviewsList() {
const { match: { params: { id } } } = this.props;
fetch(`/api/v1/interviews/${id}`).
then((response) => response.json()).
then((interviews) => setinterviews({ interviews }));
console.log("sa",interviews)
};
useEffect(() => {
console.log('start')
fetchParticipantsList();
fetchInterviewsList();
console.log('end')
});
const interviewslist = JSON.stringify(interviews)
console.log('interviewlist: ',interviewslist)
return (
<div>
<h3>All participants</h3>
<table>
<thead>
<tr>
<th>ID</th>
<th>Title</th>
<th>Description</th>
<th>Is Published</th>
</tr>
</thead>
<tbody>
{
interviewslist.map((interview) => {
return (
<tr key={interview.id}>
<td>{interview.id}</td>
<td>{interview.interview_id}</td>
<td>
{/* <Link to={`/posts/${post.id}`}> */}
{interview.participant_id}
{/* </Link> */}
</td>
<td>{interview.created_at}</td>
<td>'Yes No'</td>
</tr>
)
})
}
</tbody>
</table>
</div>
);
}
export default DetailInterview;

任何人都可以帮助我为什么这不起作用。正因为如此，我认为它正在显示 此错误：

Uncatch TypeError： interviewslist.map 不是一个函数。

此外，此控制台正在打印两次：console.log("采访列表："，采访列表(

Answer 1

你应该使用采访而不是面试列表。你实际上把面试串到面试名单上。所以 interviewList 基本上是一个字符串而不是数组。所以请使用采访地图

{
interviews? interviews.map((interview) => {
return (
<tr key={interview.id}>
<td>{interview.id}</td>
<td>{interview.interview_id}</td>
<td>
{/* <Link to={`/posts/${post.id}`}> */}
{interview.participant_id}
{/* </Link> */}
</td>
<td>{interview.created_at}</td>
<td>'Yes No'</td>
</tr>
)
}) : null
}

Answer 2

您正在尝试映射字符串，JSON.stringify 将 JavaScript 对象或值转换为 JSON 字符串。

在这种情况下，请尝试使用 JSON.parse。