出现错误：无法读取未定义的属性状态

Question

import React, { Component } from "react";
import FormUpdate from "../components/formUpdate";
import { fetchClothingItem, updateClothingItem } from "../actions/crud";

export default class Update extends Component {
    constructor(props) {
        super(props);

        this.state = {
          updateClothingItem: {}
        };
    }

    componentWillMount() {
        fetchClothingItem(this.props.match.params.postId)
        .then(data => {
        this.setState(state => {
          state.updateClothingItem = data;
          return state;
        });
        console.log("data", data);

        //HERE IT IS RETURNING EXPECTED DATA       

        console.log("this.state.updateClothingItem",this.state.updateClothingItem)    
          })
        .catch(err => {
            console.error("err", err);
        });
    }

    handleSubmit(data) {

        //HERE IT IS THROWING: 

        > "TypeError: Cannot read property 'state' of undefined"

        console.log("this.state.updateClothingItem", this.state.updateClothingItem);
            updateClothingItem(this.state.updateClothingItem.id, data); this.props.router.push("/update");
    }
    render() {
        return (
        <div>
        <FormUpdate
          //onSubmit={this.handleSubmit.bind(this)}
          id={this.state.updateClothingItem.id}
          name={this.state.updateClothingItem.name}
          sleeveLength={this.state.updateClothingItem.sleeveLength}
          fabricWeight={this.state.updateClothingItem.fabricWeight}
          mood={this.state.updateClothingItem.body}
          color={this.state.updateClothingItem.color}
        />
        <button
          type="submit"
          onClick={this.handleSubmit}
          className="addItemButton"
        >
        Button
        </button>
      </div>
    );
  }
}

Answer 1

构造函数中还没有状态

如果你想在构造函数中设置状态，你可以这样做

class SomeComponent extends Component {
   constructor(props){
      super(props)

      this.state = { someKey: someValue }
   }
}

甚至像这样

class SomeComponent extends Component {

   state = { someKey: someValue }

}

但在这种情况下，babel 应该正确配置

Answer 2

在 React 代码实现方面存在一些技术上的错误。

首先， 使用 ES6 编写类的风格，任何需要访问 Class 属性的函数都需要显式地binded。在您的情况下，您需要使用arrow function of 或binding in constructor 绑定handleSubmit 函数。

更多详情请查看此答案：Why and when do we need to bind functions and eventHandlers in React?

其次：您在 componentWillMount 函数中设置了异步请求，并且在它的成功响应中，您正在设置状态。但是在渲染组件后会触发在componentWillMount 中使用setState，因此您仍然需要进行未定义的检查。您应该使用 componentDidMount 生命周期函数来处理异步请求。

检查这个答案是否有AJAX request in componentDidMount or componentWillMount

第三： setState 是异步的，因此在 setState 函数之后记录状态值不会导致显示正确的输出。请改用setState callback。

查看这些答案了解更多详情：

calling setState doesn't mutate state immediately

When to use React setState callback

代码：

export default class Update extends Component {
    constructor(props) {
        super(props);

        this.state = {
          updateClothingItem: {}
        };
    }

    componentDidMount() {
        fetchClothingItem(this.props.match.params.postId)
        .then(data => {
        this.setState(state => {
          state.updateClothingItem = data;
          return state;
        });
        console.log("data", data);

        //HERE IT IS RETURNING EXPECTED DATA       

        console.log("this.state.updateClothingItem",this.state.updateClothingItem)    
          }) // this statement will not show you correct result since setState is async 
        .catch(err => {
            console.error("err", err);
        });
    }

    handleSubmit = (data) =>  { .    // binding using arrow function here

        console.log("this.state.updateClothingItem", this.state.updateClothingItem);
            updateClothingItem(this.state.updateClothingItem.id, data); this.props.router.push("/update");
    }
    render() {
        return (
        <div>
        <FormUpdate
          //onSubmit={this.handleSubmit.bind(this)}
          id={this.state.updateClothingItem.id}
          name={this.state.updateClothingItem.name}
          sleeveLength={this.state.updateClothingItem.sleeveLength}
          fabricWeight={this.state.updateClothingItem.fabricWeight}
          mood={this.state.updateClothingItem.body}
          color={this.state.updateClothingItem.color}
        />
        <button
          type="submit"
          onClick={this.handleSubmit}
          className="addItemButton"
        >
        Button
        </button>
      </div>
    );
  }
}

Answer 3

您忘记将 handleSubmit 函数绑定到该类。您可以使用箭头函数来定义函数。

handleSubmit=(data) =>{
...
}

或者你可以在你的构造函数中绑定函数。

constructor(props) {
        super(props);
        this.state = {
          updateClothingItem: {}
        };
        this.handleSubmit= this.handleSubmit.bind(this,data);
    }