Компонент React / Redux, необходимо заполнить определенное количество полей в зависимости от выпадающего списка

Question

Это похоже на предыдущий вопрос , который я задавал ранее, но с тех пор я изменил архитектуру своего проекта, добавив Redux.

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

В одном из выпадающих меню есть выбор none, 1, 5, 13 items. Исходя из того, какое число пользователь выбирает, второй раздел должен динамически отображать, показывая, что столько строк имеют собственный выпадающий список.

Проблема, с которой я столкнулся, заключается в том, что я изначально управлял этим поведением, используя локальные состояния и ловушки реакции С тех пор параметры выпадающего меню перенесены в хранилище, и я больше не могу добавлять поведение onChange к каждому уникальному параметру теперь, когда они генерируются как часть функции карты.

Вот оригинальный CodeSandbox для локального состояния:

И вот как выглядит мой текущий выпадающий список из моего приложения, теперь он читает из магазина:

<Select
onChange={e => {
  props.updateCart(
    {
      lineOne: 'Thing#1',
      lineTwo: 'addOns',
      itemThree: 'Thing#3',
      item:
        parent.configurationItems[parseInt(e.target.value, 10)]
    },
  )
}}
>
{parent.configurationItems.map((obj, idx) => {
  const { id, name } = obj
  return (
    <option
      key={id}
      value={idx}
    >
      {name}
    </option>
  )
})}
</Select>
</Col>

Answer 1

Сделал песочницу для вас, которая выполняет то, что вы пытаетесь сделать с помощью redux: https://codesandbox.io/s/bj984

Это ваш обновленный компонент ConfigurationOptions, остальную часть кода смотрите в песочнице :)

import React, { useState, useEffect } from "react";
import styled from "styled-components";
import "antd/dist/antd.css";
import { Row, Col } from "antd";
import AntCollapse from "./CustomCollapse";
import { connect } from "react-redux";
import { setNumberInRedux } from "./configActions";

const Button = styled.button`
  color: white;
  background-color: #0076de;
  border-radius: 5px;
`;

const ConfigurationOptions = ({ config, setNumberInRedux }) => {
  const [configNumber, setConfigNumber] = useState(0);
  const [configList, setConfigList] = useState([]);

  const setConfig = number => {
    setConfigNumber(number); //change component-state
    setNumberInRedux(number); //call action-creator to update redux
  };

  //will only run when there is a change to the redux state
  useEffect(() => {
    const number = config.number;
    //set list when redux state number changes
    let newArray = new Array(parseInt(number, 10)).fill(0);
    setConfigList(newArray);
  }, [config]);

  const setList = (number, index) => {
    setConfigList(prevState => {
      let newState = [...prevState];
      newState[index] = parseInt(number, 10);
      return newState;
    });
  };

  return (
    <AntCollapse header="configuration test">
      <div>
        <h1>Section Header</h1>
        <Row>
          <Col span={4} offset={20}>
            <Button type="submit">Apply to All</Button>
          </Col>
        </Row>
        <Row>
          <Col span={12}>
            <h3>Config Section #1</h3>
          </Col>
        </Row>
        <Row>
          <Col span={12}>
            <p>How many do you need?</p>
          </Col>
          <Col span={4} offset={8}>
            <select
              value={configNumber}
              onChange={e => setConfig(e.target.value)}
            >
              <option value={0}>None</option>
              <option value={1}>1 Option</option>
              <option value={5}>5 Options</option>
              <option value={13}>13 Options</option>
            </select>
          </Col>
        </Row>
        <Row>
          <Col span={12}>
            <h3>Conditional Config Section</h3>
          </Col>
        </Row>
        {configList.map((num, i) => (
          <Row key={i.toString()}>
            <Col span={12}>
              <p>Option Configuration Dropdown</p>
            </Col>
            <Col span={4} offset={8}>
              <select value={num} onChange={e => setList(e.target.value, i)}>
                <option value={0}>Default</option>
                <option value={1}>Add #1</option>
                <option value={2}>Add #2</option>
                <option value={3}>Add #3</option>
              </select>
            </Col>
          </Row>
        ))}
      </div>
    </AntCollapse>
  );
};

const mapStateToProps = state => {
  return {
    config: state.config
  };
};

const mapDispatchToProps = dispatch => {
  return {
    setNumberInRedux: number => {
      dispatch(setNumberInRedux(number));
    }
  };
};

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(ConfigurationOptions);