Как разделить состояние между функцией React и повторным рендерингом при изменениях

Question

У меня есть компонент реагирования, который отображает формы с флажками и диаграммой (Победа). Я хочу, чтобы компонент отображал активные флажки на графике (каждый флажок имеет свой api url, для простоты приведенный ниже код показывает бесполезные данные и отсутствие выборки). В этом коде есть несколько проблем:

1) Состояние activestock всегда кажется на один шаг позади с точки зрения console.log, в консоли оно показывает предыдущее состояние вместо фактического содержимого массива. Но в инструментах React Dev он правильно показывает активный актив.

2) VictoryChart не перерисовывается, даже если его реквизит (который является активным) изменяется, хотя я вижу в инструментах React Dev, что существует несколько компонентов VictoryLines. Это похоже на то, что родители не выполняют повторную визуализацию при изменении состояния, но я подумал, что, передавая состояние в реквизитах, вы разделяете состояние между компонентами?

3) Поскольку перехватчики переопределяют компоненты, флажки не отображаются проверка при нажатии.

Вот ссылка на песочницу: 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

Вам необходимо установить флажок checked={some_value_here}.

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

Состояние совместного использования не является неправильным, вам просто нужно добавить необходимую проверку перед возвратом.