React js:Uncaught TypeError:props.onEnterTask不是函数



//Newtask.js

import React, { useCallback } from "react";
import { useState } from "react";
import useHttp from "../hookes/useHttp";
import Taskform from "./taskform";
const newTask = (props) => {
const createTask = (tastk, taskdata) => {
const data = { id: taskdata.name, text: tastk };
props.onAddTask(data);
};
const { isloading, error, sendRequest: fetchRequest } = useHttp();
const enterTaskHandler = async (tasktext) => {
fetchRequest(
{
url: "https://react-prep-d4d1d-default-rtdb.firebaseio.com/comments.json",
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: { text: tasktext },
},
createTask.bind(null, tasktext)
);
};
return (
<section>
<Taskform onEnterTask={enterTaskHandler} loading={isloading} />
{error && <p>{error}</p>}
</section>
);
};
export default newTask;

在上面,我调用TaskForm组件并传递参数(道具)

//taskform.js

import React from "react";
import { useState } from "react";
import "./taskforms.css";
function Taskform(props) {
const [text, settext] = useState();
const Inputchangehandler = (event) => {
settext(event.target.value);
};
console.log(props.onEnterTask);
const submithandler = (text) => {
props.onEnterTask(text);
settext("");
};
return (
<div>
<input
type="text"
value={text}
onChange={Inputchangehandler}
className="asit"
/>
<button className="asit" onClick={submithandler}></button>
</div>
);
}
export default Taskform;

//在taskform中,我调用props.onEnterTask(text)……但我得到了错误

错误:未捕获类型错误:props.onEnterTask不是函数

//useHttp.js(钩子)

import { useState, useCallback } from "react";
const useHttp = () => {
const [isLoading, setisLoading] = useState();
const [error, setError] = useState(null);
const sendRequest = useCallback(async (requestConfig, applydata) => {
setisLoading(true);
setError(null);
try {
const response = await fetch(requestConfig.url, {
method: requestConfig.method ? requestConfig.method : "GET",
headers: requestConfig.headers ? requestConfig.headers : {},
body: requestConfig.body ? JSON.stringify(requestConfig.body) : null,
});
if (!response.ok) {
throw new Error("Request failed!");
}
const data = await response.json();
applydata(data);
} catch (err) {
setError(err.message || "Something went wrong!");
}
setisLoading(false);
}, []);
return {
isLoading,
error,
sendRequest,
};
};
export default useHttp;

请仔细阅读以上文件,并让我知道这个问题。

很抱歉,问题不在于道具,应用程序文件中存在其他一些组件问题,我将其他一些组件作为启动文件//////

最新更新