React useEffect hook не работает с рельсами - PullRequest
Новая
       1

React useEffect hook не работает с рельсами

1 голос
/ 28 мая 2020

Я использую перехватчики реакции, но в этом useEffect не работает. Как в консоли начало и конец не печатаются. Также я использую реакцию в проекте рельсов. 

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;

Кто-нибудь может мне помочь, почему это не работает. Из-за чего я думаю, что это показывает эту ошибку:

Uncaught TypeError: intervalslist.map не является функцией.

Также эта консоль печатает дважды: console.log ('intervallist:', список интервью)

Ответы [ 2 ]

1 голос
/ 28 мая 2020

Вы пытаетесь сопоставить строку, JSON .stringify преобразует объект или значение JavaScript в строку JSON.

Попробуйте использовать в этом случае JSON .parse .

1 голос
/ 28 мая 2020

Вы должны использовать интервью, а не список интервью. Вы фактически привязываете интервью к списку интервью. Итак, intervalList - это в основном строка, а не массив. Пожалуйста, используйте карту интервью 

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