React中的setState（）不更新状态onClick Switch（antd）

Question

当我们点击开关时，状态“valueState”没有更新我不知道为什么？？

另外，我有一个“statusValue”类型问题，因为“switch antd”通过 cons 接受布尔值，道具的初始值是数字类型

这是我正在使用的代码：

// 代码//

import React from 'react';
import { Form, Input, Switch } from "antd";
class UpdateCard extends React.Component {

constructor(props) {
    super(props);
    this.state = {
        valueState: this.props.state.status,
    }
}

handleToggle = (checked) => {
    console.log("state",this.state.valueState);
    console.log("checked",checked);
   if (checked === false){
    this.setState({
        valueState:1
      });
   }else {
    this.setState({
        valueState:0
      });
   }
    console.log("handleToggle valueState",this.state.valueState);
  };

  render() {
    const { state } = this.props;

    var statusValue = false;

    if (state.status === 0) { statusValue = true; }
  return (
  <Form id='update-state-form' 
            onFinish={this.onFinish}
            onFinishFailed={this.onFinishFailed}
            initialValues={{
                name: state ? state.name : '',
                status: state ? state.status : false,
                color: state ? state.color :'',
            }}
        >
            <FormItem {...formItemLayout} 
               name="name" 
               label={<IntlMessages id="app.stateName" />} 
               rules={[{ required: true, message: 'Please input the name !' }]} 
            >
                <Input />
            </FormItem>

            <FormItem {...formItemLayout} 
               name="color" 
               label={<IntlMessages id="app.color" />} 
               rules={[{ required: true, message: 'Please input the color !' }]}
            >
                <CirclePicker color={state.color} />
            </FormItem>

            <FormItem {...formItemLayout} 
               name="status" 
               label={<IntlMessages id="app.status" />} 
               rules={[{ required: true, message: 'Please input the status !' }]}
            >
                <Switch  defaultChecked={statusValue}  onClick={this.handleToggle}/>
            </FormItem>
        </Form>
    );
}
}
export default connect(
 null,
  {
     updateStateCardAction,
  }
 )(UpdateCard );

//****************************** 显示console.log *********** *******************//

Answer 1

只要我了解您的问题，我觉得您在这里缺少两个主要内容：

1. statusValue 尚未在该州声明。它应该是状态中的布尔值。从 Ant-Design 的文档中 defaultChecked 属性设置为 false。首先确保将 statusValue 声明为状态变量：

   this.state = {
    valueState: this.props.state.status,
    statusValue:false
   }
   
   ... // and keep state in sync with the UI
   

2. 那么您必须确保在 onClick 处理程序中传递 statusValue 状态。

    <Switch  
         defaultChecked={this.state.statusValue}  
         onClick={()=>this.handleToggle(this.state.statusValue)}
     />
   

Answer 2

您还需要传递值。

<Switch  defaultChecked={statusValue}  onClick={(statusValue) =>this.handleToggle(!statusValue)}/>

Answer 3

这是我的解决方案

import React, { Component } from 'react';
import { Switch } from 'antd';
import './App.css';

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      onCheck: 0,
    };
  }

  componentDidUpdate() {
    const { onCheck } = this.state;
    console.log(onCheck);
  }

  handleToggle = (checked) => {
    const { onCheck } = this.state;

    if (checked) {
      this.setState({ onCheck: 1 });
    } else {
      this.setState({ onCheck: 0 });
    }
  };

  render() {
    const { onCheck } = this.state;
    return (
      <div className="App">
        <header className="App-header">
          <Switch defaultChecked={onCheck} onChange={this.handleToggle} />
        </header>
      </div>
    );
  }
}

export default App;

.App {
  text-align: center;
}

.App-header {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: calc(10px + 2vmin);
}