材质UI滑块

Question

我有一个对象数组。我从材质UI使用Slider，并为数组中的每个对象渲染Slider。 对象数组就是这样。

const IndexFunds: IndexFund[] = [
  {
    title: 'IndexFund 1',
    type: 'Static',
    percentage: '2.89%',
    color: 'rgba(255, 29, 85, 1)',
  },
  {
    title: 'IndexFund 2',
    type: 'Static',
    percentage: '4.89%',
    color: 'rgba(250, 82, 124, 1)',
  },
  {
    title: 'IndexFund 3',
    type: 'Market Cap',
    percentage: '1.62%',
    color: 'rgba(240, 140, 158, 1)',
  },
  {
    title: 'IndexFund 4',
    type: 'Static',
    percentage: '7.98%',
    color: 'rgba(191, 192, 193, 1)',
  },
  {
    title: 'IndexFund 5',
    type: 'Market Cap',
    percentage: '1.1%',
    color: 'rgba(255, 225, 230, 1)',
  },
];

在我的React组件中，我这样做：

import * as React from 'react';
import ExpansionPanel from '@material-ui/core/ExpansionPanel';
import ExpansionPanelActions from '@material-ui/core/ExpansionPanelActions';
import ExpansionPanelDetails from '@material-ui/core/ExpansionPanelDetails';
import ExpansionPanelSummary from '@material-ui/core/ExpansionPanelSummary';
import Typography from '@material-ui/core/Typography';
import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
import { Add } from '@material-ui/icons';
import IconButton from '@material-ui/core/IconButton';
import Divider from '@material-ui/core/Divider';
import { withStyles } from '@material-ui/core/styles';
import Slider from '@material-ui/lab/Slider';
import Card from '@material-ui/core/Card';

import searchInduxFundActions from '../../state/searchIndexFund/actions';
const { ChangePercentageValue } = searchInduxFundActions;
import { AppState } from '../../state';
import { Dispatch, bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import `{` Grid, CardActionArea } from '@material-ui/core';


class SelectedIndexFund extends React.PureComponent<any, any> {
  constructor(props: any) {
    super(props);
    this.state = {
      filteredIndexFundArray: this.props.searchIndexFund.indexFundArray,
      selectedIndexFundArray: this.props.searchIndexFund.selectedIndexFundArray,
      indexFundArray: this.props.searchIndexFund.indexFundArray,
      isOpen: this.props.searchIndexFund.isOpen,
      loader: this.props.searchIndexFund.loader,
      expansionPanelOpen: false,
    };
  }
  handleChangePercentage = (name: string) => (event: any, value: number) => {
    console.log('HANDLE CHANGE ', name, value )
    const payload = {
      name,
      value,
    };
    this.props.changePercentageValue(payload);
  };
  static getDerivedStateFromProps(nextProps: any, prevState: any) {
    console.log('SELECTED ', nextProps.searchIndexFund.selectedIndexFundArray, ' OOOOOi ', nextProps.searchIndexFund.indexFundArray)
    return {
      indexFundArray: nextProps.searchIndexFund.indexFundArray,
      filteredIndexFundArray: nextProps.searchIndexFund.filteredIndexFundArray,
      selectedIndexFundArray: nextProps.searchIndexFund.selectedIndexFundArray,
      isOpen: nextProps.searchIndexFund.isOpen,
      loader: nextProps.searchIndexFund.loader,
    };
  }

  render() {
    const { classes } = this.props;
    const { isOpen, filteredIndexFundArray, selectedIndexFundArray } = this.state;
    return (
      <div>
        <div className={`jr-card`}>
          <div className="jr-card-header">
            {selectedIndexFundArray.length > 0 &&
              selectedIndexFundArray.map((indexFund: any) => {
                return (
                  <div className={classes.root}>
                    <ExpansionPanel>
                      <ExpansionPanelSummary expandIcon={<ExpandMoreIcon />}>
                        <div className={classes.column}>
                          <Typography className={classes.heading}>{indexFund.title}</Typography>
                        </div>
                        <div className={classes.column}>
                          <Slider
                            classes={{ container: classes.slider }}
                            //   value = {12}
                            value={parseFloat(indexFund.percentage.split('%')[0])}
                            aria-labelledby="label"
                            max={10}
                            onChange={this.handleChangePercentage(`${indexFund.title}`)}
                          />
                        </div>
                        <div className={classes.column}>
                          <Typography className={classes.secondaryHeading}>
                            {indexFund.percentage}
                          </Typography>
                        </div>
                        {/* <div className={classes.column}>
                        <IconButton disableRipple={false} style={{ padding: '0px' }}>
                          <Add />
                        </IconButton>
                      </div> */}
                      </ExpansionPanelSummary>

                      <ExpansionPanelDetails className={classes.details}>
                        {/* <div className={classes.column} />
                        <div className={classes.column}>index fund details here!</div> */}
                        <Grid container spacing={24}>
                          <Grid item xs={12} sm={6} />
                          <Grid item xs={12} sm={6}>
                            <Card className={classes.card} style={{ padding: '10px' }}>
                              <CardActionArea>
                                <Typography gutterBottom variant="h5" component="h2">
                                  Description
                                </Typography>
                                <p>
                                  Lizards are a widespread group of squamate reptiles, with over
                                  6,000 species, ranging across all continents except Antarctica
                                </p>
                              </CardActionArea>
                            </Card>
                          </Grid>
                        </Grid>
                      </ExpansionPanelDetails>
                      <Divider />
                    </ExpansionPanel>
                    <br />
                  </div>
                );
              })}
          </div>
        </div>
      </div>
    );
  }
}
const mapStateToProps = (state: AppState): any => {
  return {
    searchIndexFund: state.searchIndexfund,
  };
};
const mapDispatchToProps = (dispatch: Dispatch): any => {
  return {
    changePercentageValue: bindActionCreators(ChangePercentageValue, dispatch),
  };
};
export default connect(
  mapStateToProps,
  mapDispatchToProps,
)(withStyles(styles)(SelectedIndexFund));

selectedIndexFundArray包含来自IndexFundsArray的对象。在任何时候，它可能包含n个对象。假设首先我在selectedIndexFundArray中有1个对象。在这种情况下，我的滑块可以正常工作。现在，如果我在selectedIndexFundArray数组中有2个对象，则更改顶部滑块的值会影响第一个滑块下所有所有滑块的值。但是，如果我更改底部滑块的值，则可以正常工作，并且上面滑块的值不受影响。任何想法如何使它起作用？谢谢