每当子组件呈现时，如何更改父组件的状态值？

Question

I am learning React and I'm trying to figure out how can I change the state of a parent component whenever a child component renders.

Here is what I have done so far:

1. I passed the parent's state & setState and used useEffect, that produced unlimited renders.
2. I tried calling the function before render, that produced unlimited renders again.
3. I tried using forEach, didn't work.

Here's a codesandbox https://codesandbox.io/s/modest-almeida-f9spo?file=/src/App.js

and here's the code

import React, { useState, useEffect } from "react";
import "./styles.css";
import data from "./data";

export default function App() {
  const [total, setTotal] = useState({
    price: 0,
    discount: 0
  });

  function calcTotal(prop, value) {
    const newTotal = { ...total };
    newTotal[prop] += value;
    setTotal(newTotal);
  }

  return (
    <div className="App">
      <table>
        <thead>
          <tr>
            <th>ID</th>
            <th>Name</th>
            <th>Price</th>
          </tr>
        </thead>
        <tbody>
          {data.map((item) => (
            <Item
              key={item.id}
              data={item}
              calcTotal={calcTotal}
              total={total}
            />
          ))}
        </tbody>
        <Total total={total} />
      </table>
    </div>
  );
}

function Item(props) {
  const item = props.data;
  const calcTotal = props.calcTotal;

  useEffect(() => {
    calcTotal("price", item.price);
    calcTotal("discount", item.discount);
  }, []);

  return (
    <tr>
      <td>{item.id}</td>
      <td>{item.name}</td>
      <td>{item.price}</td>
    </tr>
  );
}

function Total(props) {
  const total = props.total;
  return (
    <tfoot>
      <tr>
        <th colSpan="2">Total Price: </th>
        <td>{total.price}</td>
      </tr>
      <tr>
        <th colSpan="2">Total Discount: </th>
        <td>{total.discount} </td>
      </tr>
    </tfoot>
  );
}

Answer 1

React does not really want you to have a bidirectional data flow. However it is possible using the new Two-way Binding Helpers: https://reactjs.org/docs/two-way-binding-helpers.html

Keep in mind though, that a change in the parent caused by the child can make the parent rerender, which in turn can make a change in the child and result in an infinite loop.

You can also checkout libraries like Redux ( https://redux.js.org/ ), to have a global storage every component can access and subscribe to events.

Answer 2

You should look into using React Redux to manage this type of behaviour.

However, you can pass a callback function from the Parent component to the Child component.

Example:

class ChildComponent extends React.Component {

  constructor(props)
  {
    super(props);
  }

  componentDidMount()
  {
    props.onChildRendered();
  }

  render() {
    return (
      
    );
  }
}

---

class ParentComponent extends React.Component {

  constructor(props)
  {
    super(props);

    this.state = {
      childRendered = false;
    }
  }

  onChildRendered = () => {
    this.setState({
      childRendered: true
    });
  }

  render() {
    return (
      <ChildComponent onChildRendered={ this.onChildRendered }/>
    );
  }
}

In the parent component you declare a function, you change the parent state within this function whenever it is triggered.

You then pass the function down to the child component as a prop.

When the child component mounts, you trigger the function passed as a prop.

This triggers the function in the parent component and changes it's state, causing a re-render.

This should never result in an infinite loop because componentDidMount() in the child component only gets triggered on the initial mount of a component.

---

This technique should be used with caution because there are better ways to manage things, like using state management middleware such as Redux.

It is probably acceptable if it is merely just to notify the parent that the child has rendered but it is common practice and encouraged for the data to flow from parents to children.

Any data in a child component that is needed in a parent component is usually moved up to the parent. The process of moving state up is called "Lifting State Up".

Answer 3

Calculate totalPrice and Discount in parent component

Try below code:

import React, { useState, useEffect } from "react";
import "./styles.css";
import data from "./data";

export default function App() {
  const [total, setTotal] = useState({
    price: 0,
    discount: 0
  });

  useEffect((prop) => {
    calcTotal();
  }, []);

  function calcTotal() {
    const newTotal = { ...total };
    data.forEach((item) => {
      newTotal.price += item.price;
      newTotal.discount += item.discount;
    });
    setTotal(newTotal);
  }

  return (
    <div className="App">
      <div>{JSON.stringify(data)}</div>
      <table>
        <thead>
          <tr>
            <th>ID</th>
            <th>Name</th>
            <th>Price</th>
          </tr>
        </thead>
        <tbody>
          {data.map((item) => (
            <Item key={item.id} data={item} total={total} />
          ))}
        </tbody>
        <Total total={total} />
      </table>
    </div>
  );
}

function Item(props) {
  const item = props.data;
  return (
    <tr>
      <td>{item.id}</td>
      <td>{item.name}</td>
      <td>{item.price}</td>
    </tr>
  );
}

function Total(props) {
  const total = props.total;
  return (
    <tfoot>
      <tr>
        <th colSpan="2">Total Price: </th>
        <td>{total.price}</td>
      </tr>
      <tr>
        <th colSpan="2">Total Discount: </th>
        <td>{total.discount} </td>
      </tr>
    </tfoot>
  );
}