javascript - 无法使用地图功能显示引导表
问题描述
我是新来的反应和一个小应用程序的工作。我有一个虚拟服务,其中有电影对象列表。我想显示一个表格,我在其中显示title, genre, stock, rate
. 现在我不断收到以下错误,我对自己做错了什么感到迷茫。任何帮助方向都会很棒
Error: Objects are not valid as a React child (found: object with keys {_id, name}). If you meant to render a collection of children, use an array instead.
应用程序.jsx
import React, { Component } from 'react';
import './App.css';
import Movies from '../src/components/movies';
class App extends Component {
render() {
return (
<div>
<main className="container">
<Movies />
</main>
</div>
);
}
}
export default App;
电影.jsx
import React, { Component } from "react";
import { getMovies } from "../services/fakeMovieService";
class Movies extends Component {
state = {
movies: getMovies(),
};
render() {
return <div>{this.buildMovieTable()}</div>;
}
buildMovieTable = () => {
return (
<table className="table">
<thead>
<tr>
<th>Title</th>
<th>Genre</th>
<th>Stock</th>
<th>Rate</th>
</tr>
</thead>
<tbody>
{this.state.movies.map((movie) => (
<tr key={movie._id}>
<td>{movie.title}</td>
<td>{movie.genre}</td>
<td>{movie.numberInStock}</td>
<td>{movie.dailyRentalRate}</td>
</tr>
))}
</tbody>
</table>
);
};
}
export default Movies;
fakeMovieService.js
import * as genresAPI from "./fakeGenreService";
const movies = [
{
_id: "5b21ca3eeb7f6fbccd471815",
title: "Terminator",
genre: { _id: "5b21ca3eeb7f6fbccd471818", name: "Action" },
numberInStock: 6,
dailyRentalRate: 2.5,
publishDate: "2018-01-03T19:04:28.809Z"
},
{
_id: "5b21ca3eeb7f6fbccd471816",
title: "Die Hard",
genre: { _id: "5b21ca3eeb7f6fbccd471818", name: "Action" },
numberInStock: 5,
dailyRentalRate: 2.5
},
{
_id: "5b21ca3eeb7f6fbccd471817",
title: "Get Out",
genre: { _id: "5b21ca3eeb7f6fbccd471820", name: "Thriller" },
numberInStock: 8,
dailyRentalRate: 3.5
},
{
_id: "5b21ca3eeb7f6fbccd471819",
title: "Trip to Italy",
genre: { _id: "5b21ca3eeb7f6fbccd471814", name: "Comedy" },
numberInStock: 7,
dailyRentalRate: 3.5
},
{
_id: "5b21ca3eeb7f6fbccd47181a",
title: "Airplane",
genre: { _id: "5b21ca3eeb7f6fbccd471814", name: "Comedy" },
numberInStock: 7,
dailyRentalRate: 3.5
},
{
_id: "5b21ca3eeb7f6fbccd47181b",
title: "Wedding Crashers",
genre: { _id: "5b21ca3eeb7f6fbccd471814", name: "Comedy" },
numberInStock: 7,
dailyRentalRate: 3.5
},
{
_id: "5b21ca3eeb7f6fbccd47181e",
title: "Gone Girl",
genre: { _id: "5b21ca3eeb7f6fbccd471820", name: "Thriller" },
numberInStock: 7,
dailyRentalRate: 4.5
},
{
_id: "5b21ca3eeb7f6fbccd47181f",
title: "The Sixth Sense",
genre: { _id: "5b21ca3eeb7f6fbccd471820", name: "Thriller" },
numberInStock: 4,
dailyRentalRate: 3.5
},
{
_id: "5b21ca3eeb7f6fbccd471821",
title: "The Avengers",
genre: { _id: "5b21ca3eeb7f6fbccd471818", name: "Action" },
numberInStock: 7,
dailyRentalRate: 3.5
}
];
export function getMovies() {
return movies;
}
export function getMovie(id) {
return movies.find(m => m._id === id);
}
export function saveMovie(movie) {
let movieInDb = movies.find(m => m._id === movie._id) || {};
movieInDb.name = movie.name;
movieInDb.genre = genresAPI.genres.find(g => g._id === movie.genreId);
movieInDb.numberInStock = movie.numberInStock;
movieInDb.dailyRentalRate = movie.dailyRentalRate;
if (!movieInDb._id) {
movieInDb._id = Date.now();
movies.push(movieInDb);
}
return movieInDb;
}
export function deleteMovie(id) {
let movieInDb = movies.find(m => m._id === id);
movies.splice(movies.indexOf(movieInDb), 1);
return movieInDb;
}
解决方案
您正在尝试为每部电影渲染“流派”单元格...
<td>{movie.genre}</td>
...但是在您的数据中, at 的值<SomeMovieInstance>.genre
是一个对象,而不是一个字符串:
{
_id: "5b21ca3eeb7f6fbccd471819",
title: "Trip to Italy",
genre: { _id: "5b21ca3eeb7f6fbccd471814", name: "Comedy" },
numberInStock: 7,
dailyRentalRate: 3.5
},
这就是让 React 如此愤怒的原因;正如错误消息所说:
对象作为 React 子对象无效
如果您将该行更改为
<td>{movie.genre.name}</td>
......它应该工作。
推荐阅读
- java - 如何检查字符串是否包含给定字符串,而不是另一个给定字符串的一部分?
- reporting-services - 如何将小计的最大值分配给ssrs报告折线图中水平轴的间隔
- python - 将元素分配给列表中的列表
- ruby-on-rails - 允许未经确认的用户访问某些需要身份验证的页面
- c# - 价值分配是提高还是降低绩效还是什么都不做?
- visual-c++ - C++ 到 C# char[]
- class - v-for 中的 Vuejs 切换类
- ios - 当应用程序ID包含`-`时,Fabric不会上传应用程序?
- cookies - 多语言网站的 Cookie 同意横幅
- java - 使用 BcryptEncoder 使用 Spring 安全性登录失败