React表格行无法删除及新增数据不显示问题求助

核心问题原因 #

1. 新增数据无法在Member.js中同步显示：
   Member组件内部声明了独立的moviesData状态，但该状态仅在组件初始化时接收父组件传入的data，后续父组件的数据源更新（新增数据）时，内部状态不会自动同步。另外你混淆了内部状态moviesData和父组件传入的props.data，误以为前者未更新就是数据源有问题。

2. 无法删除新增行：
   当前删除逻辑仅修改了Member组件内部的moviesData，但表格渲染依赖的是父组件传入的data，所以删除操作不会反映到UI上。同时数据源datalist托管在App组件中，所有数据修改操作都应该在父组件中统一处理。

修改后的代码 #

App.js（统一管理数据增删） #

import dataMovielist from '../src/data/data.json';
import Members from './Members';
import AddMember from './AddMember';
import { useState } from 'react';

function App() {
  
  const [datalist, setdatalist] = useState(dataMovielist);

  // 新增电影
  const onSubmitHandler = (newMovie) => {
    setdatalist(oldList => [newMovie, ...oldList])
  };

  // 删除电影（通过ID匹配）
  const onDeleteHandler = (movieId) => {
    setdatalist(oldList => oldList.filter(movie => movie.id !== movieId));
  };

  return (
    <div className="App">
       <AddMember onSubmitHandler={onSubmitHandler} />
       <Members data={datalist} onDeleteHandler={onDeleteHandler}/>   
    </div>
  );
}

export default App;

Member.js（移除冗余状态，调用父组件删除方法） #

import React from "react";
import '../src/css/movie.css'

function Members({ data, onDeleteHandler }) {

  const deleteMoviesHandler = (movieId) => {
    onDeleteHandler(movieId);
  };

  const tableRows = data.map((info) => {
    return (
      <tr key={info.id}>
        <td>{info.id}</td>
        <td>{info.name}</td>
        <td>
          <img src={info["picture of image"]} alt={info.name}></img>
        </td>
        <td>{info["lead actor"].join(", ")}</td>
        <td>{info.rating}</td>
        <td><button onClick={() => deleteMoviesHandler(info.id)}>Delete</button></td>
      </tr>
    );
  });

  return (
    <div>
      <table className="table table-stripped">
        <thead>
          <tr>
            <th>Id</th>
            <th>Name</th>
            <th>Image</th>
            <th>Actors</th>
            <th>Rating</th>
          </tr>
        </thead>
        <tbody>{tableRows}</tbody>
      </table>
    </div>
  );
}

export default Members;

AddMember.js（修复图片输入逻辑小问题） #

如果是要输入图片URL，将文件输入改为文本输入：

// 原type="file"改为type="text"
<input
  onChange={onChangeImage}
  id="inputFive"
  type="text"
  maxLength="100"
  placeholder="图片URL"
  name="imageName"
></input>

修改要点说明 #

• 状态提升：将所有数据操作（增、删）统一放在父组件App中，确保数据源唯一且同步。
• 移除冗余状态：Member组件不再维护独立的moviesData，直接使用父组件传入的data渲染，避免数据不一致。
• 用ID替代索引删除：通过电影的唯一ID进行删除操作，避免新增行后索引混乱导致删除错误。

内容的提问来源于stack exchange，提问作者Theow Meng Ang