React函数式组件如何加载本地JSON数据并解决删除时filter报错问题

基础逻辑确认 #

你将getMovies返回的数组传入useState作为初始值的写法本身是正确的，该函数返回的就是标准JS对象数组，不需要额外转换处理，报错是由以下两处代码错误导致：

• 命名冲突：handleDelete方法的形参名和状态变量movie重名，方法内部调用movie.filter时，实际访问的是传入的单条电影对象而非电影数组，对象不存在filter方法，因此抛出对应错误。
• 状态更新格式错误：调用setMovie时传入了{newM}格式的对象，导致原本为数组类型的状态被覆盖为对象，后续渲染时调用map/filter都会失效。
• 优化建议：状态名建议改为movies，语义更清晰，避免单复数混淆导致的命名冲突。

修正后代码 #

index.js #

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

function Movies() {
    // 直接传入getMovies返回值作为初始状态，状态名改为movies更符合语义
    const [movies, setMovies] = useState(getMovies());

    // 形参改为targetMovie避免和状态变量重名
    const handleDelete = (targetMovie) => {
      const newMovies =  movies.filter(m => m._id !== targetMovie._id)
      // 直接传入新数组更新状态，不需要包裹为对象
      setMovies(newMovies)
    }
    return (
        <React.Fragment>
            <table className="table">
                <thead>
                    <tr>
                        <th>Title</th>
                        <th>Genre</th>
                        <th>Stock</th>
                        <th>Rental Rate</th>
                        <th>Operation</th>
                    </tr>
                </thead>
                <tbody>
                {movies.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;

内容的提问来源于stack exchange，提问作者Ahmad Nadeem