Question

当我渲染页面并且列表为空时，这会导致地图问题，我想知道如何使地图功能等到按下按钮后才调用redux动作。我认为，当页面被重新呈现时，这是状态管理的问题，概念列表状态为空列表，然后通过单击按钮将其填满

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);

按钮on提交未定义状态

1 个答案: