您好,我试图根据道具的值为我的应用程序设置状态,我依赖道具的值为我的状态设置状态,但当我传递函数设置状态时,我收到的道具未定义,不知道为什么,我遵循此文档作为参考。您可以阅读下面的部分,其中说状态更新可能是异步的,这是我的代码(来自form.js文件的代码片段)
this.props.setTodos(function (_, props) {
console.log("this is props:" + props);
return [
...props.todos,
{ text: props.inputText, completed: false, id: Math.random() * 1000 },
];
});
我传递道具的app.js文件的代码
import "./App.css";
import Form from "./components/Form";
import TodoList from "./components/TodoList";
import React, { useState } from "react";
function App() {
const [inputText, setText] = useState("");
const [todos, setTodos] = useState([]);
return (
<div className="App">
<header>
<h1>My Todolist </h1>
</header>
<Form
todos={todos}
setTodos={setTodos}
setText={setText}
inputText={inputText}
/>
<TodoList />
</div>
);
}
export default App;
form.js文件的完整代码
import React from "react";
class Form extends React.Component {
constructor(props) {
super(props);
}
handler = (e) => {
// console.log(e.target.value);
this.props.setText(e.target.value);
};
submitTodoHandler = (e) => {
e.preventDefault();
this.props.setTodos(function (_, props) {
console.log("this is props:" + props);
return [
...props.todos,
{ text: props.inputText, completed: false, id: Math.random() * 1000 },
];
});
};
render() {
return (
<div>
<form>
<input onChange={this.handler} type="text" className="todo-input" />
<button
onClick={this.submitTodoHandler}
className="todo-button"
type="submit"
>
<i className="fas fa-plus-square"></i>
</button>
<div className="select">
<select name="todos" className="filter-todo">
<option value="all">All</option>
<option value="completed">Completed</option>
<option value="uncompleted">Uncompleted</option>
</select>
</div>
</form>
</div>
);
}
}
export default Form;
我不知道为什么我的道具没有定义?谢谢
1条答案
按热度按时间70gysomp1#
你需要做的是改变
submitTodoHandler
在你的生活中起作用<Form>
组成部分:您可以在functional component中定义setstate,并将其作为prop传递给类组件。函数组件中的setstate钩子的行为与您正在引用的类组件中的setstate稍有不同。
在functional components中,setstate(在您的例子中是settodos)只需使用
setState(newVariableValue)
并接受前一状态作为参数。当newvariablevalue与prop(inputtext)一起从<App>
组件到<Form>
组件,您可以使用直接访问它this.props.inputText
.使用状态挂钩