Reactjs 设置状态更新已安装或正在安装的组件

这是我的密码：

import React, { Component } from 'react';
import styled from 'styled-components';

const BtnBox = styled.ul`
display:flex;
width:50vw;
align-items:center;
justify-content:flex-start;
font-weight:900;
font-size:5vw;
letter-spacing:-0.5vw;
`;
const MyBtn = styled.li`
width:30%;
font-size:5vw;
display:flex;
align-items:center;
justify-content:flex-start;
cursor:pointer;
`;

class SignAndLog extends Component {
  constructor(props) {
    super(props);
    this.state = { Scolor: 'black', Lcolor: 'grey' };
    this.chooseFun = this.chooseFun.bind(this);
    localStorage.setItem('fuck', this.state.Scolor);
  }


  chooseFun(e) {
    const myName = e.target.dataset.name;
    if (myName === 'sign') {
      this.setState({
        Scolor: 'black',
        Lcolor: 'grey'
      });
      localStorage.setItem('status', myName);
    } else {
      this.setState({
        Scolor: 'grey',
        Lcolor: 'black'
      });
      localStorage.setItem('status', myName);
    }
  }

  render() {
    return (
      <BtnBox>
        <MyBtn onClick={this.chooseFun} data-name="sign" style={{ color: this.state.Scolor }}>註冊</MyBtn>
        <MyBtn onClick={this.chooseFun} data-name="log" style={{ color: this.state.Lcolor }}>登入</MyBtn>
      </BtnBox>
    );
  }
}


export default SignAndLog;

当我同时单击MyBtn时，它总是不工作，F12控制台区域显示：

app.js:3880警告：设置状态…：只能更新已安装或 安装组件。这通常意味着您在 未安装的组件。这是禁止的

请检查SignAndLog组件的代码

有人能告诉我该修哪吗

PS：由于我的ESlint，我不能使用console.log，所以我使用localStorage.setItem作为我的控制台。log

遵循以下步骤！您将更好地了解如何设置状态

我更喜欢使用fat-arrow函数。 试试这个

从“React”导入React，{Component}； 从“样式化组件”导入样式化； 常量BtnBox=styled.ul` 显示器：flex； 宽度：50vw； 对齐项目：居中； 调整内容：灵活启动； 字号：900； 字体大小：5vw； 字母间距：-0.5vw； `; const MyBtn=styled.li` 宽度：30%； 字体大小：5vw； 显示器：flex； 对齐项目：居中； 调整内容：灵活启动； 光标：指针； `; 类SignAndLog扩展组件{ 构造器{ 超级作物； this.state={Scolor:'black'，Lcolor:'grey'}； localStorage.setItem'fuck'，this.state.Scolor； } chooseFun=e=>{ const myName=e.target.dataset.name； 如果myName=='符号'{ 这是我的国家{ 斯考勒：“黑色”， L颜色：“灰色” }; setItem'status'，myName； }否则{ 这是我的国家{ 斯考勒：“灰色”， L颜色：“黑色” }; setItem'status'，myName； } } 渲染{ 回来 this.chooseFune}data name=符号样式={{{color:this.state.Scolor}>註冊 this.chooseFune}data name=log style={{{color:this.state.Lcolor}>登入 ; } } 导出默认SignAndLog；

---

您是否有可能几乎同时单击这些按钮？这可能与您单击其中一个按钮时父组件卸载有关buttons@OP，请验证Saif的回答并相应地进行注释。这与将上下文绑定到函数箭头函数无关。这与渲染过程中更新状态有关，这在react中是不允许的。因为它起作用并不意味着这是正确的方式，也不意味着它是回答问题的方式。请在您说话时务必确保。在投票否决之前，有很多方法可以检查你的信息。请阅读这篇文章：。我真的很确定我在说什么。提出问题的人出现了以下错误：app.js:3880警告：setState…：只能更新已安装或正在安装的组件。这通常意味着您在未安装的组件上调用了setState。这是一个禁止操作。此错误与箭头函数无关。它与为正在安装或已安装的组件设置状态有关unmounted@SaifAlradhi你指出的错误是完全正确的。onClick={this.chooseFunc}不会绑定上下文来调用this.setState。使用箭头函数是一种方法。尽管onClick={this.chooseFunc}已经足够了，因为您将chooseFunc变成了一个arrow函数。但是对于用户的警告错误，很奇怪，首先他提供的代码不会导致这样的错误，其次错误应该不会再出现。