component不会更改数组中每个元素的状态

Question

场景是当我点击一个按钮时，它会根据数组的元素加载一组卡片， 当我点击另一个按钮时，它也会加载该按钮的原生卡片组

下面是获取数组元素的每张卡的代码

＆＃13;

＆＃13;

{!!props[props.clickedindex].Products
   ? (props[props.clickedindex].Products.map((Products, i)=> <CardProduct {...props[props.clickedindex].Products} key={i} index={i} arrkey={Object.keys(Products)} /> ))
                  : (<div />)}

＆＃13;

＆＃13;

＆＃13;

以下是该卡的代码

问题是，当我点击第一个按钮并且只有3个元素时，我根据状态变化的道具完美地获得了三种颜色

但是当点击第二个按钮并且有6个元素时，前3个保持相同的状态和颜色并且根本不更新

我相信我是在变异，如果是这样帮助我怎么不

＆＃13;

＆＃13;

import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from 'material-ui/styles';
import Card, { CardContent, CardMedia, CardActions } from 'material-ui/Card';
import { Typography, Grid, Button, Paper } from 'material-ui';

//{styles removed for easy reading}

class CardProduct extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            background: '#ffffff'
        }
    }

    componentWillMount = () => {
        const { props } = this

        console.log(props.arrkey[0].toString())
        switch (props.arrkey[0].toString()) {
            case 'Passion':
                return (
                    this.setState({ background: '#EF5350' })
                )
                break
            case "Love":
                return (
                    this.setState({ background: '#FFB74D' })
                )
                break
            case "Intelligence":
                return (
                    this.setState({ background: '#42A5F5' })
                )
                break
            case "Anger":
                return (
                    this.setState({ background: '#78909C' })
                )
                break
            case "Perseverance":
                return (
                    this.setState({ background: '#8D6E63' })
                )
                break
            case "determination":
                return (
                    this.setState({ background: '#66BB6A' })
                )
                break
            case "Speed":
                return (
                    this.setState({ background: '#EC407A' })
                )
                break
            case "Focus":
                return (
                    this.setState({ background: '#8D6E63' })
                )
                break
            default: return this.state;
        }
    }

    render() {
        const { props } = this
        const { classes } = this.props;


        console.log('THIS IS PROPS IN PRODUCTCARD,', props.arrkey[0], this.state, props[props.index],props)

        return (
            <div >

                <Card className={classes.card} >
                    <div
                        className={classes.media}
                        style={{ background: this.state.background }}>
                        <Typography style={{ color: '#000000' }} gutterBottom variant="caption" component="h2" align='center' >
                            {`${props.arrkey}`}
                        </Typography>
                    </div>
                    <CardContent style={{ padding: '1vw', alignItems: 'center' }}>
                        <Typography gutterBottom variant="caption" component="h2" align='center' >
                            {`${props[props.index][props.arrkey]}`}
                        </Typography>
                    </CardContent>

                </Card>
            </div>
        );
    }
}

CardProduct.propTypes = {
    classes: PropTypes.object.isRequired,
};

export default withStyles(styles)(CardProduct);

＆＃13;

＆＃13;

＆＃13;

Answer 1

这是否解决方法希望这是正确的方法

＆＃13;

＆＃13;

 colorChooser = (props) => {

        switch (props.arrkey[0].toString()) {
            case 'Relationship':
                return (
                    this.CardDiv('#EF5350' )
                )
                break
            case "Marriage":
                return (
                    this.CardDiv( '#FFB74D' )
                )
                break
            case "Children":
                return (
                    this.CardDiv('#42A5F5' )
                )
                break
            case "yearly":
                return (
                    this.CardDiv( '#78909C' )
                )
                break
            case "Monthly":
                return (
                    this.CardDiv('#8D6E63' )
                )
                break
            case "Questions":
                return (
                    this.CardDiv('#66BB6A' )
                )
                break
            case "Matching":
                return (
                    this.CardDiv('#EC407A' )
                )
                break
            case "Career":
                return (
                    this.CardDiv( '#66BB6A' )
                )
                break
            default: return this.CardDiv('#ffffff');

        }
    }

    CardDiv = (bgcolor) => {
        const { props } = this
        const classes = props.classes
        return (
            <div
                className={classes.media}
                style={{ background:(bgcolor.toString()) }}>
                <Typography style={{ color: '#000000' }} gutterBottom variant="caption" component="h2" align='center' >
                    {`${props.arrkey}`}
                </Typography>
            </div>)
    }

    render() {
        const { props } = this
        const { classes } = this.props;


        console.log('THIS IS PROPS IN PRODUCTCARD,', props.arrkey[0], this.state, props[props.index])

        return (
            <div >

                <Card className={classes.card} >
                {this.colorChooser(props)}

                    <CardContent style={{ padding: '1vw', alignItems: 'center' }}>
                        <Typography gutterBottom variant="caption" component="h2" align='center' >
                            {`${props[props.index][props.arrkey]}`}
                        </Typography>
                    </CardContent>

                </Card>
            </div>
        );
    }

＆＃13;

＆＃13;

＆＃13;