javascript - React Js 将 bool 值传递回父状态

Question

我在我的导航栏组件上登录，但我的主要组件上有一些东西需要在有人登录时更新，我可以让导航栏上的登录正常工作，但变量没有被传递回调用导航栏的父代码如下所示

<LoginBar AuthRes={this.state.AuthResults} IsLoggedIn={this.state.isLoggedIn}/>

这是将变量 IsLoggedIn 传递到我的导航栏，然后在我的导航栏中我的代码是这样的

LoginAuth = (Res) => {
    if (Res.username === this.state.Username && Res.password === this.state.Password) {
        this.setState({
            IsLoggedIn: true,
        }, function(){

        });
        this.hideModal();

    } else {
        console.log("Gets to login auth and false");
    }
}
CheckLoginAuth() {
    console.log("gets to check login auth");
    console.log(this.state.AuthRes);
    console.log("Username=" + this.state.Username);
    console.log("Password=" + this.state.Password);
    var self = this;
    this.props.AuthRes.map(function (Res) {
        console.log("ID=" + Res.id);
        console.log("Username=" + Res.username);
        console.log("Password=" + Res.password);
        self.LoginAuth(Res);
    });
}

因此，在单击登录时，它会询问您的详细信息，然后它会使用 .map 遍历我拥有的文件中的所有登录详细信息，然后将其传递给 LoginAuth，后者将检查输入是否与 auth 文件匹配，并且将 IsLoggedIn 设置为 true 如果它匹配我将如何将 IsLoggedIn 推回父级以更改那里的某些内容

另外，一旦我找到正确的值，我将如何打破循环，就好像我有一个警告说 alert("Incorrect username or password") 如果所有三个值都没有，则这样做 3 次'没遇到

谢谢安迪

编辑:

当我执行 this.props.IsLoggedIn(true) 或 this.props.isLoggedIn(true) 时，我收到错误 TypeError: Cannot read property 'props' of undefined 所以它说 isLoggedIn 和 IsLoggedIn 还未定义

状态 = {
AuthRes: this.props.AuthRes,
是开放的:假的，
用户名: ''，
密码: ''，
搜索结果: []，
测试模式:真，
isLoggedIn: this.props.IsLoggedIn,
授权:'',
}

Answer 1

您可以做的是使用 props 将一个函数从 Parent 组件传递到 Child 组件。假设您的父组件中有此功能:

function doSomething(argument){
    console.log(argument);
}

现在将此函数传递给您的子组件:

<LoginBar AuthRes={this.state.AuthResults} IsLoggedIn={this.state.isLoggedIn} doSomething={this.doSomething}/>

然后，在子组件中，当您获得该函数时，只需从您需要的任何地方调用它:

//Some code ...
this.props.doSomething(argument)
//Some code ...

对于break题，不能break map函数。你可以做的是将 map 函数转换为 for 循环并使用 break 或在 map 中使用一些标志来知道何时停止执行 map 。检查一下 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/break