Question

这是我的代码：

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警告：setState（...）：只能更新已安装或安装组件。这通常意味着你在一个上调用了setState（）未安装的组件。这是一个无操作。

请检查SignAndLog组件的代码。

任何人都可以告诉我应该在哪里修理吗？

PS：由于我的ESlint，我不能console.log()，因此我使用localStorage.setItem作为我的console.log()

Answer 1

关注此article！你将更好地理解如何设置状态。

我更喜欢使用胖箭头功能。试试吧！

＆＃13;

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' };
    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={(e)=>this.chooseFun(e)} data-name="sign" style={{ color: this.state.Scolor }}>註冊</MyBtn>
        <MyBtn onClick={(e)=>this.chooseFun(e)} data-name="log" style={{ color: this.state.Lcolor }}>登入</MyBtn>
      </BtnBox>
    );
  }
}


export default SignAndLog;

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

＆＃13;

setState更新已安装或安装的组件

1 个答案: