[英]Function passed as props not a function
我試圖通過一個名為 addtodo 的 function 作為 class 的道具。 我已經通過了 function 如下
export class Todo extends Component {
constructor(props) {
super(props);
this.state = {todos:[]};
this.addtodo = this.addtodo.bind(this);
this.deleteTodo = this.deleteTodo.bind(this);
}
componentDidMount(){
axios.get('https://jsonplaceholder.typicode.com/posts').then(res=>{
this.setState({
todos:res.data
})
})
}
addtodo(todo){
todo.id=Math.floor(Math.random()*100)
todo.completed=true
const todos=[...this.state.todos,todo]
this.setState({
todos:todos
})
}
deleteTodo(id){
const todo=this.state.todos.filter(todo=>{
return(
todo.id!==id
)
}
)
this.setState({
todos:todo
})
}
render() {
return (
<div>
<h1 className="center-align"> Todos</h1>
<Todolist todos={this.state.todos} deleteTodo={this.deleteTodo}/>
<Addtodo addtodo={this.addtodo}/>
</div>
)
}
}
export default Todo
在 Addtodo.js 中,我使用 function 作為道具,如下所示
class Addtodo extends Component {
constructor(props) {
super(props);
this.state = { title:'',
body:''
};
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleChange(e){
this.setState({
[e.target.id]:[e.target.value]
})
}
handleSubmit(e){
e.preventDefault()
this.props.addtodo(this.state)
this.setState({
title:'',
body:''
})
}
render() {
return (
<form className="col s12" onSubmit={this.handleSubmit}>
<div className="row">
<div className="input-field col s6">
<input placeholder="Add title" id="title" type="text" className="validate" onChange={this.handleChange}/>
</div>
<div className="input-field col s6">
<input placeholder="Add body" id="body" type="text" className="validate" onChange={this.handleChange}/>
</div>
<button type="submit">Submit</button>
</div>
</form>
)
}
}
export default Addtodo
但我收到錯誤Uncaught TypeError: this.props.addtodo is not a function
。 我也檢查了拼寫錯誤,但不明白為什么這不起作用。 而如果我將它作為道具傳遞給另一個 class 並簡單地記錄一個它正在工作的 hello 消息。
我在 stackblitz 上成功運行了你的代碼,沒有錯誤
我發現了另一個錯誤,
前
handleChange(e) {
this.setState({
[e.target.id]: [e.target.value]
});
}
后
handleChange(e) {
this.setState({
[e.target.id]: e.target.value
});
}
提示:因為我的積分不夠,所以不能加評論,只能編輯回答
更新:
前:
function App() {
return (
<BrowserRouter>
<div className="container">
<Addtodo />
<Switch>
<Route exact path="/" component={Todo} />
<Route path="/:id" component={Task} />
</Switch>
</div>
</BrowserRouter>
);
}
export default App;
function App() {
return (
<BrowserRouter>
<div className="container">
<Switch>
<Route exact path="/" component={Todo} />
</Switch>
</div>
</BrowserRouter>
);
}
render(<App/>, document.getElementById('root'))
請檢查代碼是不是多個Addtodo?
You're not registering the function addtodo
in the class, thus this.addtodo
is not bound to your function addtodo
but instead to null. 因此你的錯誤。
class Toggle extends React.Component {
constructor(props) {
super(props);
this.state = {isToggleOn: true};
// This binding is necessary to make `this` work in the callback
this.handleClick = this.handleClick.bind(this);
}
handleClick() {
this.setState(state => ({
isToggleOn: !state.isToggleOn
}));
}
render() {
return (
<button onClick={this.handleClick}>
{this.state.isToggleOn ? 'ON' : 'OFF'}
</button>
);
}
}
ReactDOM.render(
<Toggle />,
document.getElementById('root')
);
注意第 6 行 function 首先綁定到 class,然后可以通過this.<function_name>
定義和調用它。
在您的代碼中,您在構造函數中缺少:
this.addtodo = this.addtodo.bind(this);
在此之前,您不能調用this.addtodo
,因為它沒有綁定到this
,因此您的錯誤是this.props.addtodo
不是 function。
我猜你的構造函數中缺少綁定。 在您的構造函數中,您需要像這樣聲明它
this.addtodo = this.addtodo.bind(this);
已編輯**
我已經測試了代碼,似乎沒有錯誤,
Todo.js
import React, { Component } from "react";
import axios from "axios";
import Addtodo from "./Addtodo";
export class Todo extends Component {
state = {
todos: [],
};
componentDidMount() {
axios.get("https://jsonplaceholder.typicode.com/posts").then((res) => {
this.setState({
todos: res.data,
});
});
}
addtodo = (todo) => {
todo.id = Math.floor(Math.random() * 100);
todo.completed = true;
const todos = [...this.state.todos, todo];
this.setState({
todos: todos,
});
};
render() {
console.log(this.state.todos);
return (
<div>
<h1 className="center-align"> Todos</h1>
<Addtodo addtodo={this.addtodo} />
</div>
);
}
}
export default Todo;
Addtodo.js
import React, { Component } from "react";
class Addtodo extends Component {
constructor(props) {
super(props);
this.state = { title: "", body: "" };
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleChange(e) {
this.setState({
[e.target.id]: [e.target.value],
});
}
handleSubmit(e) {
e.preventDefault();
this.props.addtodo(this.state);
this.setState({
title: "",
body: "",
});
}
render() {
return (
<form className="col s12" onSubmit={this.handleSubmit}>
<div className="row">
<div className="input-field col s6">
<input
placeholder="Add title"
id="title"
type="text"
className="validate"
onChange={this.handleChange}
/>
</div>
<div className="input-field col s6">
<input
placeholder="Add body"
id="body"
type="text"
className="validate"
onChange={this.handleChange}
/>
</div>
<button type="submit">Submit</button>
</div>
</form>
);
}
}
export default Addtodo;
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.