函数仅在debbuger React中工作

Question

我对React很陌生，所以我需要你的帮助。

我有一个具有多个输入的组件，所以我必须验证它们。

提交按钮在默认情况下是禁用的，只有当输入不为空时，我才能使其能够提交。

若我删除了输入中的值，按钮应该返回到禁用状态。

我的问题是，这个函数(验证函数(只有在我逐步执行时才能在调试器中工作。

有人能帮我吗？以下是我发现有助于理解问题的代码片段。

this.state = {
profile: newProfile,
disable: true,
};

let newProfile= {
firstName: "",
lastName: "",
nickname: "",
email: ""
};
validate = () => {
console.log(this.state)
debugger;
if (!this.state.profile.name || !this.state.profile.email) {
return false;
} else {
console.log("Profile name and email NOT BLANK")
console.log(this.state)
return true;
}
};

profileChange= ((target, value) => {
this.setState(prevState => {
let profile= this.state.profile;
profile[target] = value;
return {
profile: profile,
}
})
const isValid = this.validate();
if (isValid) {
console.log("valid inputs");
this.setState({disable: false});
}
else{
console.log("invalid inputs");
this.setState({disable: true});
}
});

Answer 1

setState是一个异步函数(为什么？(，在调用this.validate时，this.state.profile尚未设置。

但是，当您一步一步地执行时，状态会更新为您想要的值，因此它对您有效。

这里的解决方案是使用setState提供的回调函数，仅在设置状态后执行validate。

profileChange = (target, value) => {
this.setState(prevState => {
return {
profile: {
...prevState.profile,
[target]: value,
}
};
}, () => {
const isValid = this.validate();
if (isValid) {
console.log("valid inputs");
this.setState({ disable: false });
} else {
console.log("invalid inputs");
this.setState({ disable: true });
}
});
};

还要注意，我在setState中使用了prevState，而不是this.state，因此profile状态实际上并没有发生突变。

Answer 2

setState函数是异步的，这意味着在更新状态时，可以触发其他函数。

我认为在您的情况下，状态正在更新，但在此之前，已经调用了this.validate()。

为了解决这个问题，你必须添加你想在更新该状态后激发的代码，作为回调：

this.setState(prevState => {
let profile= this.state.profile;
profile[target] = value;
return {
profile: profile,
}
}, () => {
const isValid = this.validate();
if (isValid) {
console.log("valid inputs");
this.setState({disable: false});
} else {
console.log("invalid inputs");
this.setState({disable: true});
}
});

Answer 3

您可以在输入中使用"禁用"参数，这里有一个示例

class NameForm extends React.Component {
constructor(props) {
super(props);
this.state = {value: ''};
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleChange(event) {
this.setState({value: event.target.value});
}
handleSubmit(event) {
alert('A name was submitted: ' + this.state.value);
event.preventDefault();
}
render() {
return (
<form onSubmit={this.handleSubmit}>
<label>
Name:
<input type="text" value={this.state.value} onChange={this.handleChange} />
</label>
<input type="submit" value="Submit" disabled={!this.state.value}/>
</form>
);
}
} 

这是我为你做的一个代码笔，用来测试更快的ragnar