按钮onSubmit未定义状态

Question

当我渲染页面并且列表为空时会产生地图问题我想知道如何使地图功能等到按下按钮调用redux动作。我认为这是一个状态管理的问题，当页面是rendred时，概念列表状态是一个空列表然后它通过点击按钮填满

import React, { Component } from "react";
import PropTypes from "prop-types";
import { connect } from "react-redux";
import { graphGet } from "../../actions/graphActions";

class Graph extends Component {
  constructor(props) {
    super(props);
    this.state = {
      concepts: []
    };
    this.onSubmit = this.onSubmit.bind(this);
  }

  componentWillReceiveProps(nextProps) {
    if (nextProps.errors) {
      this.setState({ errors: nextProps.errors });
    }
  }
  onSubmit(e) {
    e.preventDefault();

    this.props.graphGet(this.props.org);
  }
  render() {
    this.setState((this.state.concepts = this.props.graph.graph.concepts));
    console.log(this.state.concepts);
    const list = (
      <dl>
        {this.state.concepts.map(concept => {
          return (
            <div key={concept.id_cpt}>
              <dt>{concept.fr_cpt}</dt>

              <hr />
            </div>
          );
        })}
      </dl>
    );
    return (
      <div>
        <form onSubmit={this.onSubmit}>
          <input type="submit" />
        </form>
        {this.state.concepts ? list : "wait"}
      </div>
    );
  }
}
Graph.prototypes = {
  graphGet: PropTypes.func.isRequired,
  auth: PropTypes.object.isRequired,
  errors: PropTypes.object.isRequired
};
const mapStateToProps = state => ({
  auth: state.auth,
  graph: state.graph,
  errors: state.errors
});
export default connect(
  mapStateToProps,
  { graphGet }
)(Graph);

Answer 1

欢迎来到stackoverflow。看看你的代码，我有一些建议给你。

1）不要在render方法中调用状态更新逻辑。这会导致性能不佳问题，并且通常会导致意外的重新渲染。此外，this.setState((this.state.concepts = this.props.graph.graph.concepts))不是更新组件状态的正确方法。

您可以做的是将该逻辑移动到componentDidMount（）生命周期方法中，该方法将在组件首次呈现后立即触发。

componentDidMount(){
   this.setState({
      concepts: this.props.graph.graph.concepts
   });
}

2）如果您希望在提交表单后填充列表，则可以将该逻辑存储在函数中，并在验证表单已被提交/按钮被单击后使用它。在呈现列表之前，我们还将使用另一个状态值来检查表单是否已提交。

所以添加它，你的代码看起来像这样：

import React, { Component } from "react";
import PropTypes from "prop-types";
import { connect } from "react-redux";
import { graphGet } from "../../actions/graphActions";

class Graph extends Component {
  constructor(props) {
    super(props);
    this.state = {
      concepts: [],
      formSubmitted: false
    };
    this.onSubmit = this.onSubmit.bind(this);
  }

  componentDidMount(){
    this.setState({
       concepts: this.props.graph.graph.concepts
    })
  }

  componentWillReceiveProps(nextProps) {
    if (nextProps.errors) {
      this.setState({ errors: nextProps.errors });
    }
  }
  onSubmit(e) {
    e.preventDefault();
    this.props.graphGet(this.props.org);
    this.setState({
       formSubmitted: true
    })
  }

  createList(){
      return(
         <dl>
            {this.state.concepts.map(concept => {
              return (
                <div key={concept.id_cpt}>
                  <dt>{concept.fr_cpt}</dt>
                <hr />
               </div>
             );
             })}
         </dl>
      )
  }

  render() {
    return (
      <div>
        <form onSubmit={this.onSubmit}>
          <input type="submit" />
        </form>
        {this.state.concepts && this.state.formSubmitted ? this.createList() : 
        "wait"}
      </div>
    );
  }
}
Graph.prototypes = {
  graphGet: PropTypes.func.isRequired,
  auth: PropTypes.object.isRequired,
  errors: PropTypes.object.isRequired
};
const mapStateToProps = state => ({
  auth: state.auth,
  graph: state.graph,
  errors: state.errors
});
export default connect(
  mapStateToProps,
  { graphGet }
)(Graph);