ReactJS:无法获取组件状态下字符串的长度

我有个小问题。在我的函数

isLoginOk（）

中，它从不进入

if

。即使我的字符串长度超过1个字符，它也会每次在

else

中输入

当我在

if

前面输入

console.log

时，我可以看到我的字符串长度大于1，但它没有进入

if

为什么呢？（我已通过

handleChange（）

验证处于组件状态的字符串是否已正确更新）

导出默认类InputLogin扩展React.Component{
建造师（道具）{
超级（道具）；
此.state={
登录名：“，
}
};
handleChange=（e）=>{
这是我的国家({
[e.target.name]：[e.target.value]
});
}
isLoginOk（）{
如果（this.state.login.length>1）{
返回（OK）；
}否则{
返回（错误）；
}
}
render（）{
返回(
{this.isLoginOk（）}
);
}
}

在

handleChange（）

中设置组件状态的方式与

isLoginOk（）

期望定义状态的方式似乎不一致

在

handleChange（）

函数中，“方括号”语法

[e.target.value]

表示您正在将键

[e.target.name]

的状态值设置为数组：

 this.setState({
        // Brackets around [e.target.value] creates array value
        [e.target.name]: [e.target.value] 
 });

isLoginOk() {

    // You're accessing the string directly and not as an array item
    if (this.state.login.length > 1) {
        return (<div>OK</div>);
    } else {
        return (<div>ERROR</div>);
    }
}

但是，

isLoginOk（）

函数希望值是字符串而不是数组：

 this.setState({
        // Brackets around [e.target.value] creates array value
        [e.target.name]: [e.target.value] 
 });

isLoginOk() {

    // You're accessing the string directly and not as an array item
    if (this.state.login.length > 1) {
        return (<div>OK</div>);
    } else {
        return (<div>ERROR</div>);
    }
}

---

移除e.target.value周围的括号

还可以简化渲染并去掉isLoginOk函数。似乎没有必要

<input type="text" name="login" value={this.state.login} onChange={this.handleChange} /> 
<div>{ this.state.login.length > 1 ? 'OK' : 'ERROR' }</div>

{this.state.login.length>1？'OK'：'ERROR'}

您的代码、您的

handleChange

值中有一个bug

[e.target.name]: [e.target.value]

您正在将

this.state.login的值设置为
['some input']
。验证总是失败，因为无法使用
this.state.login.length
获取数组中字符串的长度。您的验证将根据数组长度返回
0
或
1
，当然不是您想要的

要解决此问题，请删除
[e.target.value]
周围的括号


类InputLogin扩展了React.Component{
建造师（道具）{
超级（道具）
此.state={
登录名：“
}
}
handleChange=（e）=>{
这是我的国家({
[e.target.name]：e.target.value
});
}
render（）{
const{login}=this.state；
const loginResult=login.length>1？“确定”：“错误”；
返回(
{loginResult}
)
}
}
ReactDOM.render（，document.querySelector（#app））
正文{
背景：#20262E；
填充：20px；
字体系列：Helvetica；
颜色：白色；
}

React是一个JavaScript框架，它不会改变JavaScript的工作方式。因此，如果
this.state.login.length>1
从来都不是
true
，那么您没有正确设置
this.state.login
的值。你验证了
e.target.name
是你期望的吗？你好，我做了，很好！解释一下
e.target.value
周围的
[…]
是什么意思，以及为什么这会导致条件总是失败，这将非常有用。@FelixKling谢谢-我刚刚用一些额外的细节和文档更新了答案你好，这就是问题所在。但是，我的登录变量已正确更新。这是一种奇怪的行为，但你发现了问题所在。谢谢，我刚刚做到了。因为我的上一篇文章，我需要2分钟才能完成；）谢谢你的解释