使用助焊剂和组件生命周期的正确方法

Question

我正在迁移我在 CodePen 上看到的代码。

在 IssueBox 内，我计划实施一个表单，最终用户将更新该表单，将状态从 'unverified' 设置为 'verified'。

App（重命名此组件）将是我的 parent，IssueBox 将是 child。

所以我完成了 flux => Action -> dispatcher -> udpate db -> update view。

现在我有了新的状态并且应该更新视图，我是否使用 componentWillRecieveProps() 然后在那里设置状态，以便在 IssueBox 中我可以继续使用 this.props 从而依次更新它。

import React, { Component } from "react";
  import IssueBox from "./issuebox.js";
  import "./App.css";

  class App extends Component {
    constructor(props) {
      super(props);

      this.state = {
        isLoaded: false,
        email: [],
        counter: 0,
        title: "Test run"
      };
    }

    componentDidMount() {

      fetch(
        "https://s3-us-west-2.amazonaws.com/s.cdpn.io/311743/dummy-emails.json"
      )
        .then(res => res.json())
        .then(result => {
          const emails = result.data;
          console.log("resutl state: ", emails);
          let id = 0;
          for (const email of emails) {
            email.id = id++;
            email.verified = 'False'
          }
          this.setState({
            isLoaded: true,
            emails: emails
          });
        });
    }
    render() {
      //console.log(this.state.email);
      return (
        <div className="App">
          <div>
            <IssueBox emails={this.state.email} />
          </div>
        </div>
      );
    }
  }


  //issuebox.js

  import React, { Component } from "react";

  class IssueBox extends Component {
    constructor(args) {
      super(args);

      const emails = this.props.emails;
      console.log("inner props: ", emails);
      let id = 0;
      for (const email of emails) {
        email.id = id++;
      }

      this.state = {
        selectedEmailId: 0,
        currentSection: "inbox",
        emails
      };
    }

//...从codepen复制粘贴

setSidebarSection(section) {
  let selectedEmailId = this.state.selectedEmailId;
  if (section !== this.state.currentSection) {
    selectedEmailId = "";
  }

  this.setState({
    currentSection: section,
    selectedEmailId
  });
}

componentWillReceiveProps(newProps) {
  // Assign unique IDs to the emails

  this.setState({ emails: newProps.data });
}

render() {
  const currentEmail = this.state.emails.find(
    x => x.id === this.state.selectedEmailId
  );
  return (
    <div>
      <Sidebar
        emails={this.props.emails}
        setSidebarSection={section => {
          this.setSidebarSection(section);
        }}
      />
    )}

  ///.....copy and pase from codepen

Answer 1

错误是由 componentWillReceiveProps() 中的这一行引起的：

this.setState({ emails: newProps.data });

电子邮件来自一个名为 emails 的属性，因此该行应该是：

this.setState({ emails: newProps.emails });

也就是说，componentWillReceiveProps() gets called more frequently than you might expect。我建议您将 id 添加到 App 的 componentDidMount() 内的电子邮件中，以便它们 IssueBox 可以使用。这意味着 App 将电子邮件保持在其状态并简单地将它们作为道具传递给 IssueBox，因此您可以从 IssueBox 的状态中删除 emails 并仅使用通过 IssueBox 中各处的 props 传入的电子邮件（类似于其他组件如何使用 emails 进入它们的 props 并且不要将它们保持在自己的本地状态）。

使用助焊剂和组件生命周期的正确方法

Correct approach for using flux and component lifecycle

flux

reactjs