0

好吧，我用 react 和 redux 创建了一个项目。在减速器初始状态中，我有一个对象数组。我使用地图在屏幕上分配项目，好的。但我的主要疑问是我创建了一个带有输入的过滤器组件，但我不知道如何按标题过滤对象，我不知道如何制作它，因为我的数组在减速器中。

减速器

    const initialState = [
    {
        id: "01",
        cardImage: "https://static3.tcdn.com.br/img/img_prod/450860/muda_da_flor_camelia_rosa_1396_1_20190611093649.jpg",
        cardName: "Camélia",
        cardText: "Lorem ipsum dolor sit amet, consectetur adipiscing elit",
        fullText: "Camélia Lorem ipsum dolor sit amet, consectetur adipiscing elit, ",
        categoria: "Jardim",
    },   

    {
        id: "02",
        cardImage: "http://www.mundodeflores.com/images/coreopsis.jpg?phpMyAdmin=9ea091c51a5aa3cf876fb3cf0a5f7f3d",
        cardName: "Coreópsis",
        cardText: "Lorem ipsum dolor sit amet, consectetur adipiscing elit",
        fullText: " Coreópsis Lorem ipsum dolor sit amet, consectetur adipiscing elit, ",
        categoria: "Jardim",
    },  
]

const cardList = (state = initialState, action) => {
switch (action.type) {
    case " ":
        return [ ...state, action.payload];
    default:
        return state;
}
};

主卡

export default function MainCard(props) {
  const classes = useStyles();



  return (
    <CardStyled className={classes.root}>
      <CardActionArea>
        <CardMedia
          component="img"
          alt={props.cardName}
          height="140"
          image={props.cardImage}
          title={props.cardName}
        />
        <CardContent>
          <Typography gutterBottom variant="h5" component="h2">
            {props.cardName}
          </Typography>
          <Typography variant="body2" color="blue" component="p">
            {props.cardText}
          </Typography>
        </CardContent>
      </CardActionArea>
      <CardActionsStyled>
        <ButtonStyled size="small" color="primary">
          Comprar
        </ButtonStyled>
      </CardActionsStyled>
    </CardStyled>
  );
}

MainCard.propTypes = {
  cardName: PropTypes.object.isRequired,
  cardImage: PropTypes.object.isRequired,
  cardText: PropTypes.object.isRequired,
};

卡片容器

const CardContainer = (props) => {
    return (
        <MainContainer>
            {props.cardList.map(cardList => {
                return <MainCard
                            cardName={cardList.cardName} 
                            cardImage={cardList.cardImage}
                            cardText={cardList.cardText}
                />    
            })}
        </MainContainer>
    )

}
function mapStateToProps (state) {
    return{
      cardList: state.cardList,
    }
  }

这里过滤，不知道怎么办，如何过滤reducer数组的itens？

const FilterbyName = () => {
    return (
        <Main>
            <InputStyled></InputStyled>
        </Main>

    )
}

家

  class Home extends React.Component {
    render() {
        return(
            <div>
                 <Header />
                <Toolbar>
                    <Menu />
                    <FilterbyName />
                </Toolbar>
                <CardContainer />

            </div>
        )
    }
}
4

0 回答 0