React useEffect 钩子不适用于 Rails答案

【问题标题】：React useEffect hook is not working with railsReact useEffect 钩子不适用于 Rails
【发布时间】：2020-05-29 02:02:21
【问题描述】：

我正在使用反应钩子，但其中 useEffect 不起作用。正如在控制台开始和结束不打印。我也在rails项目中使用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;

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

未捕获的类型错误：interviewslist.map 不是函数。

这个控制台也打印了两次：console.log('interviewlist: ',interviewslist)

【问题讨论】：

标签： reactjs react-hooks

【解决方案1】：

您应该使用采访而不是采访列表。您实际上将采访字符串化为 interviewList。所以 interviewList 基本上是一个字符串而不是一个数组。所以请使用 interviews.map

{
      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
}

【讨论】：

你能记录采访列表吗？
我应该从哪一行记录。
嗨，我把 console.log 放在我的答案中。请尝试代码并查看控制台中的 interviewList 输出
我们不能把控制台放在那里。它给出了一个错误。
不应该。通常我们可以在花括号 { /*.我们可以在这里使用 console.log */ }

【解决方案2】：

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

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

【讨论】：

未捕获的语法错误：JSON 输入意外结束。使用后出现此错误。
'/api/v1/interviews/${id}' 返回的 JSON 字符串是什么？
它返回一个json对象。
为什么在尝试映射字符串之后尝试执行此“JSON.stringify(interviews)”？您可以直接使用“interviews.map..”
Uncaught (in promise) TypeError: Cannot read property 'props' of undefined