尝试更新值时无法更改状态答案

【问题标题】：Can not change state while trying to update value尝试更新值时无法更改状态
【发布时间】：2019-12-09 16:08:39
【问题描述】：

我是新手，我正在创建一个员工表单，我必须将性别信息发送为 JSON 格式。初始状态

constructor(){

    super()
    this.state ={
        gender:{
            gender:""
        },
 }

在这里我定义了我的初始状态。 handleChange 事件部分

handleChange(event) {
    const {name, value, type, checked} = event.target
    type === "checkbox" ? this.setState({ [name]: checked }) : this.setState({ [name]: value })
}

我在这里处理复选框类型数据以更新当前状态的值。这是句柄提交部分。我必须以这种格式向 API 发送数据

gender: {
gender:"male"
}
handleSubmit(event) {

    event.preventDefault();

        const obj = this.state

        console.log(this.obj)
        axios.post('https://jsonplaceholder.typicode.com/posts',this.state)

  }

表格部分

 <div className="form-group">
       <label for="gender">Gender:</label>
            <div className="radio" style={genderRadio}>
                   <label>
                     <input type="radio" value="male" checked={this.state.gender.gender === "male"} onChange={this.handleChange} name="gender"  />Male</label>

              </div>
             <div className="radio">
                   <label>
                      <input type="radio"  value="female" checked={this.state.gender.gender === "female"} onChange={this.handleChange} name="gender"/>Female</label>
             </div>
             <div className="radio ">
                <label>
                   <input type="radio"  value="others" checked={this.state.gender.gender === "others"} onChange={this.handleChange} name="gender" />Others</label>
             </div> 


  </div>

【问题讨论】：

您能提供工作示例，例如在 jsfiddle、codepen 上吗？我无法理解那里有什么问题，什么不适合你
如果我初始化 this.state ={ gender: " " } ，然后改变输入它会改变 state 。但是我必须像这样初始化状态 this.state ={gender : {gender:" "}} 。那么状态不会改变。谢谢
你有什么理由在 state 内的性别对象中使用性别值吗？
是的，因为我必须以这种格式将数据发送到 api。
你为什么不保持状态部分干净，没有对象，最后在句柄提交函数中构建你需要的对象结构。这样你的代码会更整洁。

标签： reactjs

【解决方案1】：

首先，您需要在handleChange 函数中绑定this 关键字，使其指向组件的执行上下文。

要么在构造函数中显式绑定它，要么使用箭头函数。如果你不这样做，this 关键字将是undefined，因此你不能使用this.setState()

此外，您有一个 gender 对象，在您的组件状态中有一个名为 gender 的自己的字段。您需要考虑两个级别的数据。所以更新inner-gender值不会这么简单this.setState({ [name]: checked })

在此处查看工作沙箱：https://codesandbox.io/s/elated-maxwell-piobv

import React from "react";
import ReactDOM from "react-dom";

import "./styles.css";

class App extends React.Component {
  constructor() {
    super();
    this.state = {
      gender: {
        gender: ""
      }
    };
  }
  handleChange = event => {
    const { name, value, type, checked } = event.target;
    if (type !== "checkbox") {
      this.setState(
        {
          [name]: {
            ...this.state[name],
            [name]: value
          }
        }
      );
    }
  };

  handleSubmit(event) {
    event.preventDefault();

    const obj = this.state;

    console.log(this.obj);
    // axios.post("https://jsonplaceholder.typicode.com/posts", this.state);
  }
  render() {
    return (
      <div className="form-group">
        <label for="gender">Gender:</label>
        <div className="radio">
          <label>
            <input
              type="radio"
              value="male"
              checked={this.state.gender.gender === "male"}
              onChange={this.handleChange}
              name="gender"
            />
            Male
          </label>
        </div>
        <div className="radio">
          <label>
            <input
              type="radio"
              value="female"
              checked={this.state.gender.gender === "female"}
              onChange={this.handleChange}
              name="gender"
            />
            Female
          </label>
        </div>
        <div className="radio ">
          <label>
            <input
              type="radio"
              value="others"
              checked={this.state.gender.gender === "others"}
              onChange={this.handleChange}
              name="gender"
            />
            Others
          </label>
        </div>
      </div>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

【讨论】：

【解决方案2】：

如下更改您的 onChange 处理程序

      handleChange(event) {
            const {name, value, type, checked} = event.target
            if(type === "checkbox"){
              this.setState({ [name]: checked })
            } else {
              if(name=== "gender"){
                this.setState({ gender: { gender: value });
              } else {
                this.setState({ [name]: value })
              }
            }
        }

出现问题是因为您将性别嵌套在另一个性别对象中。

【讨论】：

【解决方案3】：

您的问题在于更新状态。尝试以下替代方案。

** Current:**

handleChange(event) {
    const {name, value, type, checked} = event.target
    type === "checkbox" ? this.setState({ [name]: checked }) : this.setState({ 
   [name]: value })
}

**Solution:**

constructor(props){
    super(props)
    this.state ={
        data:{
            gender:""
        },
 }

handleChange(event) {
    const {name, value, type, checked} = event.target
    this.setState({
         data:{
           [name]: type =="checkbox" ? checked : value
         }
    })

}

【讨论】：