如何在 React 函数之间共享状态并在更改时重新渲染

Question

I have a react component that renders a forms with checkboxes and a chart (Victory). I want the component to show the active checkboxes in the graph (each checkboxes has its api url, for simplicity, the code below shows useless data and no fetching). There are multiple problems in this code:

1) The activestock state always seem to be one step behind in the point of view of the console.log, in the console it show the previous state instead of the actual content of the array. But in the React Dev Tools it shows the activestock correctly.

2) The VictoryChart doesnt get re-rendered even though its props (which is the activestock) changes, even though I can see in the React Dev Tools that multiple VictoryLines components exist. It's like the parents doesn't rerender on state changes, but I thought that by passing a state in props, you shared state between components?

3) Because the hooks rerenders the components, the checkboxes doesn't show a check when clicked.

Here is a sandbox link: https://codesandbox.io/s/crazy-murdock-3re1x?fontsize=14&hidenavigation=1&theme=dark

import React, {useState, useEffect}from 'react'
import Card from 'react-bootstrap/Card';
import Container from 'react-bootstrap/Container';
import Row from 'react-bootstrap/Row';
import { VictoryLine, VictoryChart } from 'victory';



export default function HomeCards(props){

    const [activestock, setActiveStock] = useState([])

    function handleActiveStocks(props){

        if (activestock.includes(props) === false){
             setActiveStock([...activestock, props])
             console.log(activestock)

        } 
        else {
            setActiveStock(activestock.filter(activestock => activestock !== props))           
            console.log(activestock)
        }
    }


    function Lines(props){
        const charts = []

        if (props.chart !== undefined){
            props.chart.map(function(val, index){
                charts.push(

                    <VictoryLine data={[
                        {x:index+1, y:index+2},
                        {x:index+2, y:index+4}
                    ]}/>

                )
            })
            return charts
    }  
        return null
    }

    function RealCharts(props){

        return(
        <VictoryChart>
            <Lines chart={props.stocks}></Lines>
        </VictoryChart>
        )
    }

    function Forms(props){

        const hg=[]
        props.text.map(function(val, index){

            hg.push(
                <form>
                    {val} <input type='checkbox' onClick={()=> handleActiveStocks(val)}/> {index}
                </form>
            )
        })
        return(hg)
    }

    return(
        <Container fluid>
           <Row style={{position:'relative', top:'2vh'}}>

                <Card style={{width:props.width}}>
                    <Card.Header>U.S Equity</Card.Header>
                    <Forms 
                    text={['S&P 500', 'NASDAQ',' DOW', 'Russel 1000', 'Large Cap', 'Small Cap', 'MSFT', 'FB']}
                         />
                </Card>

                <Card>
                    {/* <VictoryChart >
                        <Lines chart={activestock}/>
                    </VictoryChart> */}
                    <RealCharts stocks={activestock}/>
                </Card>


            </Row>
        </Container>
    )
}

Answer 1

You need a checked={some_value_here} for checkbox to be checked.

import React, { useState, useEffect } from "react";
import Card from "react-bootstrap/Card";
import Container from "react-bootstrap/Container";
import Row from "react-bootstrap/Row";
import { VictoryLine, VictoryChart } from "victory";

export default function HomeCards(props) {
  const [activestock, setActiveStock] = useState([]);

  function handleActiveStocks(props) {
    if (activestock.includes(props) === false) {
      setActiveStock([...activestock, props]);
      console.log(activestock);
    } else {
      setActiveStock(activestock.filter(activestock => activestock !== props));
      console.log(activestock);
    }
  }

  function Lines(props) {
    const charts = [];

    if (props.chart !== undefined) {
      props.chart.map(function(val, index) {
        charts.push(
          <VictoryLine
            data={[
              { x: index + 1, y: index + 2 },
              { x: index + 2, y: index + 4 }
            ]}
          />
        );
      });
      return charts;
    }
    return null;
  }

  function RealCharts(props) {
    return (
      <VictoryChart>
        <Lines chart={props.stocks} />
      </VictoryChart>
    );
  }

  // useEffect()

  function Forms(props) {
    const hg = [];
    props.text.map(function(val, index) {
      console.log(activestock)
      // check the value exists in the activeStock
      const checked=activestock.includes(val);
      hg.push(
        <form>
          {val}{" "}
          <input type="checkbox" checked={checked} onClick={() => handleActiveStocks(val)} />{" "}
          {index}
        </form>
      );
    });
    return hg;
  }

  return (
    <Container fluid>
      <Row style={{ position: "relative", top: "2vh" }}>
        <Card style={{ width: props.width }}>
          <Card.Header>U.S Equity</Card.Header>
          <Forms
            text={[
              "S&P 500",
              "NASDAQ",
              " DOW",
              "Russel 1000",
              "Large Cap",
              "Small Cap",
              "MSFT",
              "FB"
            ]}
          />
        </Card>

        <Card>
          {/* <VictoryChart >
                        <Lines chart={activestock}/>
                    </VictoryChart> */}
          <RealCharts stocks={activestock} />
        </Card>
      </Row>
    </Container>
  );
}

The shared state is not wrong, you just need to add necessary check before return it.