Блог

Я пытаюсь получить данные из конечной точки и получаю ошибку: объекты недопустимы как дочерние объекты React..Если вы хотели отобразить коллекцию дочерних элементов, используйте вместо этого массив.

 import React, { useState, useEffect } from "react";
import { useHistory } from "react-router-dom";
import axios from "axios";
import PropTypes from "prop-types";
import Movie from "./Movie/Movie";

    const Movies= () => {
      const history = useHistory();
      const [renderedMovies, setRenderedMovies] = useState([]);
    
      useEffect(() => {
        const requestOptions = {
          method: "GET",
          headers: {
            "Content-Type": "application/json",
            Authorization:
              JSON.parse(localStorage.getItem("tokenType"))  
              " "  
              JSON.parse(localStorage.getItem("accessToken")),
          },
        };
        axios
          .get("/movies", requestOptions)
          .then((response) => {
            setRenderedMovies(response.data);
          })
          .catch((err) => alert(err));
      }, []);
    
      return (     
          { renderedMovies amp;amp; (
            <ul className="movies_list">
              {renderedMovies.map((movie) => (
                <Movie
                  key={movie.movieName}
                  startTime={movie.startTime}
                  finishTime={movie.finishTime}
                  duration={movie.duration}
                  author={movie.author}
                  movieDescription={movie.movieDescription}
                  movieCollection={movie.movieCollection}
                  clicked={() => history.push(`/movies/${movie.movieName}`)}
                />
              ))}
            </ul>
          )}
      );
    };
    
    Sessions.propTypes = {
        startTime: PropTypes.string.isRequired,
        finishTime: PropTypes.string.isRequired,
        duration: PropTypes.string.isRequired,
        author: PropTypes.string.isRequired,
        movieDescription: PropTypes.string.isRequired,
        movieCollection: PropTypes.string.isRequired
    };
    
    export default Movies;
    
    Movie.js
    import React from "react";
    import "./Movie.css";
    
    const Movie= (props) => {
      return (
        <li>
          <div onClick={props.clicked}>
            <div className="movie_details">
             <span>{props.movieName}</span>
              <span>{props.startTime}</span>
              <span>{props.finishTime}</span>
              <span>{props.duration}</span>
              <span>{props.author}</span>
              <span>{props.movieDescription}</span>
              <span>{props.movieCollection}</span>
              <span>{props.screenshots}</span>
            </div>
          </div>
        </li>
      );
    };
    
    export default Movie;
  

Вот как выглядит эта конечная точка в postman:

 http://localhost:8000/movies


  

 [
        {
            "movieName": "Titanic",
            "startTime": "2020-09-11T07:20:00.000 00:00",
            "finishTime": "2020-09-11T09:00:00.000 00:00",
            "duration": 100,
            "author": 
             {
             "Author1",
             "Author2"
             },
            "movieDescription": "description",
            "movieCollection": [ 
            {
            "timeMade": "2020-08-29T12:58:11.000 00:00",
            "category": "new"
            },
            {
            "timeMade": "2020-07-29T12:58:11.000 00:00",
            "category": "new"
            }],
            "id": 1
            },
            {
            "movieName": "Harry Potter",
            "startTime": "2020-09-11T07:20:00.000 00:00",
            "finishTime": "2020-09-11T09:00:00.000 00:00",
            "duration": 100,
            "author": 
             {
             "Author1",
             "Author2"
             },
            "movieDescription": "description",
            "movieCollection": [ 
            {
            "timeMade": "2020-08-29T12:58:11.000 00:00",
            "category": "new"
            },
            {
            "timeMade": "2020-07-29T12:58:11.000 00:00",
            "category": "new"
            }],
            "id": 2
        }
    ]
       
  

Я пытаюсь получить данные из конечной точки и получаю ошибку: объекты недопустимы как дочерние объекты React..Если вы хотели отобразить коллекцию дочерних элементов, используйте вместо этого массив.

movieCollection представляет собой массив объектов. Поэтому используйте вот так: CodeSandbox

 <span>
     {props.movieCollection.map(
       ({ timeMade, category }) => timeMade   " "   category
     )}
</span>