时间戳

首页 > 解决方案 > 如何将本地 JSON 数据设置为 React 中的功能组件？

reactjs - 如何将本地 JSON 数据设置为 React 中的功能组件？

问题描述

我是新来的反应。我被困在这里了。我不确定如何将作为函数返回的 json 数据传递给 useState。我使用了类，一切都运行良好。现在我正在尝试将该代码转换为功能组件。当我删除一个项目时，它会显示一个错误。movie.filter 不是函数。

index.js

import React, { Component,useState } from 'react'
import {getMovies} from "../services/fakeMovieService"

function Movies() {
    const movies = getMovies()
    const [movie, setMovie] = useState(movies);

    const handleDelete = (movie) => {
      const newM=  movie.filter(m => m._id != movie._id)
      setMovie({newM})
    }
return (
               <React.Fragment>
            <table className="table">
            <thead>
                <tr>
                    <th>Title</th>
                </tr>
            </thead>
                <tbody>
                {movie.map(movie =>(
                    <tr key={movie._id}>
                        <td>{movie.title}</td>
                        <td>{movie.genre.name}</td>
                        <td>{movie.numberInStock}</td>
                        <td>{movie.dailyRentalRate}</td>
                    <td><button onClick={()=>handleDelete(movie)} className="btn btn-danger btn-sm">Delete</button></td>
                    </tr>
                ))
                }
            </tbody>
        </table>
        </React.Fragment>
    );
}

export default Movies;

JSON

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

标签： reactjs

解决方案

setMovie({newM})

应该

setMovie(newM)

因为你的状态是一个数组。参数movie和状态movie具有相同的名称，因此您尝试Array.prototype.filter在对象上使用。

将重组后的数组值重命名为useStatetomovies和setMovies：

const initialMovies = getMovies()
const [movies, setMovies] = useState(initialMovies);

使用功能状态更新，因为新状态依赖于旧状态：

const handleDelete = (movie) => {
    setMovies(previousMovies => previousMovies.filter(m => m._id !== movie._id))
}

并用于movies渲染

{movies.map(movie => (...

推荐阅读