React Props.func不是React的工作

Question

我是新手。我在运行react程序时发现了这个问题。它说"；props.func不是一个函数"；我的AddMembers.js

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

AddMember.js 的部分代码

const AddMember = (props) => {
let movies = []; 
const navigate = useNavigate();
const [nameofmovie, setnameofmovie] = useSt
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 
<input
onChange={onChangeImage}
id="inputFive"
type="file"
maxLength="100"
placeholder="Name of Images"
name="imageName"
></input>
<label id="labelSix">Lead Actor N
<input
onChange={onChangeActor}
id="inputSix"
type="text"
maxLength="500"
placeholder="Name of Actor"
name="actorName"
></input>
<label id="labelSeven">Rating</la
<input
onChange={onChangeRating}
id="inputSeven"
type="text"
maxLength="10"
placeholder="Rating"
name="movieRating"
></input>
<button onClick={transferValue} i
<button id="removeButton">Remove 
</div>
</form>
</div>
<p>{movies}</p>
</div>
);
};
export default AddMember;

我的会员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=""></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>
<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}]

如果我不添加navigation((，一切都很好。但是一旦我添加了导航；未捕获的类型错误：props.func不是一个函数"发生。图像也不能工作

我将如何在json中定义图像？

Answer 1

THe 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();

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</label>
<input
onChange={onChangeName}
id="inputFour"
type="text"
maxLength="100"
placeholder="Movies Names"
name="moviesName"
></input>
<label id="labelFive">Picture of Movies</label>
<input
onChange={onChangeImage}
id="inputFive"
type="file"
maxLength="100"
placeholder="Name of Images"
name="imageName"
></input>
<label id="labelSix">Lead Actor Names</label>
<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</butto
<button id="removeButton">Remove Movie</button>
</div>
</form>
</div>
<p>{movies}</p>
</div>
);
};
export default AddMember;

Member.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=""></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>
<AddMember func={()=>addRows()} />
</div>
);
}
export default Members;

在这里我重写Member.js和AddMember.js.