为什么使用 setState 时我的状态没有在 React 上更新？

Question

我想在React上做一个简单的待办事项列表。我不使用挂钩，因为我还没有学会如何使用它们。问题是待办事项列表字段的状态没有更新。

我将一个表单与我想要在任务列表中包含的字段放在一起，并通过值将它们连接到状态。然后，我创建了一个函数，通过setState捕获值并更新状态。我做错了什么?

class Form extends React.Component {
render() {
const {
taskInput,
priorityInput,
dateChange,
dateInput,
textInput,
handleChange,
handleClick,
isSaveButtonDisabled 
} = this.props

return (
<form>
<label
htmlFor="task-input"
>
Tarefa:
<input 
type="text"
id="task-input"
name="taskInput"
value={ taskInput }
onChange={ handleChange }
/>
</label>
<label
htmlFor="priority-input"
>
Prioridade:
<select
id="priority-input"
name="priorityInput"
value={ priorityInput }
onChange={ handleChange }
>
<option>Baixa</option>
<option>Normal</option>
<option>Alta</option>
<option>Urgente</option>
</select>
</label>

class App extends React.Component {
constructor(props) {
super(props)
this.state = {
taskInput: '',
priorityInput: 'Baixa',
dateInput: '',
textInput: '',
isSaveButtonDisabled: true,
savedTasks: [],
};
}
handleChange = ({ target }) => {
const { name, value } = target;
this.setState({
[name]: value,
}, () => {
this.setState({ isSaveButtonDisabled: this.validateFields() })
});
}

Answer 1

在你的onChange函数中，你没有运行传递的函数。它们被react视为值，而不是实际的函数。我认为这是因为实际的实现来自其他地方。您应该像这样将它作为返回函数传入:

<input                     
type="text"
id="task-input"
name="taskInput"
value={ taskInput }
onChange={ () => handleChange() }        />

更新所有从道具中调用的onChange函数。如果它仍然不起作用，请尝试更改应用组件中的handleChange函数

handleChange = ({ target }) => {
const { name, value } = target;
this.setState({
[name]: value,
}, () => {
this.setState({ isSaveButtonDisabled: this.validateFields() })
});
}

:

handleChange = ({ target }) => {
const { name, value } = target;
this.setState(prevState =>({
...prevState,
[name]:value
}));
}

显示你在App组件中调用Form组件的位置，并确保props被正确地传递给Form您的选项字段也应该有一个值props，它引用像这样传递的实际值:

<option value = 'value'>'appeared user option'</option> 
/* when onChange is set on the Select input field, the value passed will be  
the value = 'value' and not 'the appeared user option' */

希望我对你有所帮助

Answer 2

使用功能组件是前进的方向，正如@ThiefMaster和@Anes所指出的那样

使用功能组件和react钩子，你有

function App(){
const [data, setData]=useState({
taskInput: '',
priorityInput: 'Baixa',
dateInput: '',
textInput: '',
isSaveButtonDisabled: true,
savedTasks: [],
})
handleChange=(e)=>{
setData({
...data,
[e.target.id]:e.target.value
})
}
return(
<div>content here... NOTE: make sure yr IDs are same as variables names</div>
)

}

您的表单将看起来像这样

<input 
type="text"
id="taskInput"
name="taskInput"
value={ data.taskInput }
onChange={ handleChange }
/>

注意:请学习功能组件和react hooks，因为我也在学习，但这会让你了解你所指的内容。