Mój projekt React wydaje się renderować wszystko dwa razy (zauważyłem po wywołaniu console.log i pobraniu go 2x) wydaje się, że dzieje się tak, gdy po raz pierwszy deklaruję stan w mojej aplikacji, dziennik, zanim stan wyrenderuje je jako dziennik po 2x.

Dodatkowo składnik componentDidMount po zadeklarowaniu stanu renderuje się tylko raz

import React, { Component } from "react";
import { getProteins } from "./services/proteinsService";
import ProteinBuilder from "./containers/ProteinToolbar/ProteinBuilder.jsx";
import BlendOutput from "./containers/BlendOutput/BlendOutput";
import "./App.css";

console.log("App before state");
class App extends Component {
  state = { proteins: getProteins() };
  componentDidMount() {
    console.log("componentDidMount");
  }

  render() {
    console.log("App after state");
    return (
      <div className="container">
        <div className="row">Nav</div>
        <div className="row">
          <div className="col col-sm-3">
            <ProteinBuilder proteins={this.state.proteins} />
          </div>
          <div className="col-sm-9">
            <div className="row">
              <div className="col-12 BlendOutput  border rounded">
                <BlendOutput proteins={this.state.proteins} />
              </div>
            </div>
          </div>
        </div>
      </div>
    );
  }
}

export default App;

Moje getProteins () pobiera z następujących elementów:

const proteins = [
  {
    _id: 1,
    name: "Pea Protein Isolate",
    description: "Pea Protein Isolate",
    digestibility: 0.98,
    AA: {
      His: 2.5,
      Ile: 4.5,
      Leu: 8.4,
      Lys: 7.2,
      MetCys: 2.1,
      PheTyr: 9.3,
      Thr: 3.9,
      Trp: 1,
      Val: 5
    },
    percentOfBlend: 0.382
  },

  {
    _id: 2,
    name: "Texturized Pea Protein",
    description: "Texturized Pea Protein",
    digestibility: 0.94,
    AA: {
      His: 2.0,
      Ile: 3.91,
      Leu: 6.84,
      Lys: 5.96,
      MetCys: 2.69,
      PheTyr: 7.31,
      Thr: 3.02,
      Trp: 0.84,
      Val: 4.23
    },
    percentOfBlend: 0.448
  },

  {
    _id: 3,
    name: "Sacha Inchi Protein",
    description: "Sacha Inchi",
    digestibility: 0.92,
    AA: {
      His: 2.6,
      Ile: 5,
      Leu: 6.4,
      Lys: 4.3,
      MetCys: 3.7,
      PheTyr: 7.9,
      Thr: 4.3,
      Trp: 2.9,
      Val: 4
    },
    percentOfBlend: 0.17
  },

  {
    _id: 4,
    name: "Potato Protein",
    description: "Potato protein isolate",
    digestibility: 0.95,
    AA: {
      His: 1.7,
      Ile: 5.6,
      Leu: 9.2,
      Lys: 7.1,
      MetCys: 3.2,
      PheTyr: 11.6,
      Thr: 4.4,
      Trp: 1.4,
      Val: 8
    },
    percentOfBlend: 0.0
  }
];

export function getProteins() {
  return proteins;
}

export function multiplyProteins() {
  proteins.map(proteins.AA.map());
}

1
Phil S 1 kwiecień 2020, 03:42

3 odpowiedzi

Najlepsza odpowiedź

Utworzyłem uproszczoną wersję Twojego przypadku we fragmencie poniżej i nie widziałem tego samego zachowania, jeśli setState nigdy nie był wywoływany. Dlatego myślę, że problem jest jednym z następujących:

  • składnik potomny wywołuje metodę setState i powoduje ponowne renderowanie
  • komponent macierzysty powoduje ponowne renderowanie
  • masz włączony StrictMode.

Ten fragment kodu przedstawia informacje o tym, co dzieje się podczas cyklu renderowania. Skomentuj sekcję, która ustawia stan, i masz przykład, który powinien być taki sam, jak opublikowany, bez składników podrzędnych.

console.log("create App component");
function setFoo(){console.log('setting foo'); return 'bar'}
class App extends React.Component {
  state = { foo: setFoo() };
  componentDidMount() {
    console.log("componentDidMount. Current state", this.state);
    this.setState(
      {qux: 'quo'}, 
      () => console.log('setState callback (set state has been fully applied) has state', this.state)
    )
    console.log("componentDidMount -> this.setState() was called (but may not have been applied). Current state", this.state)
  }

  render() {
    console.log("App.render() with state", this.state);
    return (
      <div>
        {JSON.stringify(this.state)}
      </div>
    );
  }
}

console.log('before dom render')
ReactDOM.render(<App/>, document.getElementById('app'))
console.log('after dom render')
<div id="app" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

Jeśli chcesz poeksperymentować z fragmentem kodu, możesz też spróbować wywołać setState wiele razy z rzędu i zobaczyć, co stanie się ze stanem po każdym wywołaniu.

3
Garrett Motzner 24 wrzesień 2020, 22:09

proteins: getProteins() nie jest zalecane. Proponuję zrobić to:

componentDidMount(){ this.setState({proteins: getProteins()}); }

A metoda render() jest wywoływana za każdym razem, gdy aktualizujesz stan lub zmieniasz właściwości.

1
Akin Aguda 1 kwiecień 2020, 00:58

React wywołuje dwa razy niektóre metody, takie jak metoda renderowania, aby pomóc programistom wyłapać złe praktyki, takie jak wywołania API i inne efekty uboczne w niewłaściwych metodach.

ComponentDidMount to właściwe miejsce do wywoływania efektów ubocznych, dlatego React wywołuje to raz.

Więcej informacji znajdziesz tutaj: https://reactjs.org/docs/strict-mode. html # detecting-nieoczekiwany-efekt-uboczny

0
Mahdi 1 kwiecień 2020, 00:48