React中props.func非函数报错及JSON图片定义问题求助

问题描述 #

1. 添加useNavigate()后触发错误：Uncaught TypeError: props.func is not a function，未添加该API前功能正常；
2. JSON中定义的图片路径无法正常显示，需明确正确的路径定义方式。

相关代码 #

AddMember.js #

import React, { useState } from "react";
import { useNavigate } from "react-router-dom"
import "../src/css/AddMember.css";
import '../src/data/data.json';

const AddMember = (props) => {
 let movies = []; 
 const navigate = useNavigate();
 // 修复：useState需传入初始值
 const [nameofmovie, setnameofmovie] = useState('');
 const [moviepic,setmoviepic] = useState("");
 const [leadActor,setleadActor] = useState("");
 const [rating,setRating] = useState("");

 function onChangeName(event) {
   setnameofmovie(event.target.value);
 }

 function onChangeImage(event){
   setmoviepic(event.target.value);
 }  

 function onChangeActor(event){
   setleadActor(event.target.value.split(","));
 }

 function onChangeRating(event){
   setRating(event.target.value);
 }

 const transferValue = (event) => {
    console.log('props obj:', props)
    event.preventDefault();
    const val = {
       "name" :nameofmovie,
       "picture of image": moviepic,
       "lead actor": leadActor,
       "rating": rating
    };
    props.func(val);
    clearState();
    navigate("/members");
 };

 const clearState = () => {
    setnameofmovie(' ');
    setmoviepic(' ');
    setleadActor(' ')
    setRating(' ');
 };

 return (
    <div>
      <div id="topFormLayerOne" >
        <form>
          <div id="secondFormLayerTwo">
            <label id="labelFour">Movie Names
            <input
              onChange={onChangeName}
              id="inputFour"
              type="text"
              maxLength="100"
              placeholder="Movies Names"
              name="moviesName"
            ></input>
            <label id="labelFive">Picture of Image
            <input
              onChange={onChangeImage}
              id="inputFive"
              type="file"
              maxLength="100"
              placeholder="Name of Images"
              name="imageName"
            ></input>
            <label id="labelSix">Lead Actor Names
            <input
              onChange={onChangeActor}
              id="inputSix"
              type="text"
              maxLength="500"
              placeholder="Name of Actor"
              name="actorName"
            ></input>
            <label id="labelSeven">Rating</label>
            <input
              onChange={onChangeRating}
              id="inputSeven"
              type="text"
              maxLength="10"
              placeholder="Rating"
              name="movieRating"
            ></input>
            <button onClick={transferValue} id="submitButton">Submit</button>
            <button id="removeButton">Remove</button>
          </div>
        </form>
      </div>
      <p>{movies}</p>
    </div>
  );
};

export default AddMember;

Members.js #

import React, { useState } from "react";
import jsonData from "../src/data/data.json";
import AddMember from "./AddMember";

function Members() {
  const [studentData, setStudentData] = useState(jsonData);

  const tableRows = studentData.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"]}</td>
        <td>{info.rating}</td>
      </tr>
    );
  })

  const addRows = (data) => {
    const totalStudents = studentData.length;
    data.id = totalStudents + 1;
    const updatedStudentData = [...studentData];
    updatedStudentData.push(data);
    setStudentData(updatedStudentData);
  };

  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>
      {/* 修复：直接传递addRows函数，无需箭头函数包裹 */}
      <AddMember func={addRows} />
    </div>
  );
}

export default Members;

JSON数据文件 #

[{ 
  "id": 1,
  "name" : "Ticket to Paradise",
  "picture of image": "/images/Ticket_to_Paradise.jpg", 
  "lead actor": ["George Clooney", "Julia Roberts"],
  "rating":5
}]

问题解决步骤 #

1. 修复props.func is not a function错误 #

• 原因：原代码中<AddMember func={()=>addRows()} />的箭头函数未接收参数，且函数引用在组件重渲染时可能丢失，导致props.func无法正常调用。
• 解决方案：直接将addRows函数传递给func属性，因为addRows本身就是接收数据参数的函数：

  <AddMember func={addRows} />
  

• 额外修复：AddMember中const [nameofmovie, setnameofmovie] = useState缺少初始值，需补充为useState('')，避免状态初始化异常。

2. 修复图片路径显示问题 #

React中静态资源引用规则：

• 图片放public文件夹（如public/images/Ticket_to_Paradise.jpg）：路径写根相对路径/images/Ticket_to_Paradise.jpg，直接用<img src={info["picture of image"]}>即可加载。
• 图片放src文件夹（如src/images/Ticket_to_Paradise.jpg）：
  1. JSON中写相对路径："picture of image": "../images/Ticket_to_Paradise.jpg"
  2. 渲染时用require处理路径：

     <img src={require(info["picture of image"])} alt={info.name} />
     

• 注意：<input type="file">获取的event.target.value是浏览器安全处理后的伪路径，无法直接作为图片src使用，若需实现上传预览，需用FileReader读取文件转为base64格式。

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