Javascript 在react my child card元素中，仅显示一个杂务，如果刷新，则可能是另一个杂务。它需要为每个孩子显示

这是子列表的代码。我已经创建了一个单独的组件杂务列表。它在卡片中调用，需要显示分配给每个孩子的家务。孩子的id被附加到数据库中的琐事中

以下是路线代码：

  router.get('/:id', authenticate, (req, res) => {
  const { id } = req.params;

  Child.findById(id)
  .then(child => {
    if (child) {
      Child.getChoreById(id) // if child is found then get chore by id
        .then(chore => {
          let addChore = []
          if(chore.length) {
            addChore = chore // if chore exists add it to array
          }
          res.json({ chore: addChore })
        })
        .catch(err => {
          res.status(500).json({ message: 'Failed getting chore' });
        });
    } else {
      res.status(404).json({ message: 'Could not get chore for child' })
    }
  })
  .catch(err => {
    console.log(err)
    res.status(500).json({ message: 'Failed to get chore' });
  });
});

子列表组件的代码：

const ChildList = ( props ) => {

  const classes = useStyles();

  const fetch = props.getChildren


  useEffect(() => {
    fetch()
    
  }, [fetch])
  
 
  const childProps = props.childs.child

  return (
    <div className="child-card-wrap">
    {childProps && childProps.length > 0 
    ? childProps.map((chld, index) => (
      
    
        <Card 
        key={index}
        className={classes.root}
        
        >
          <Typography 
          > <Button
            onClick={() => deleteChild(chld.id)  }
          ><span>X</span></Button>
          </Typography>
          
          <CardHeader
            avatar={
              <Avatar 
              aria-label="child" 
              className={classes.avatar}
              src=""
              >
              {chld.fstname.toUpperCase().charAt(0)}

              </Avatar>
            }
            titleTypographyProps={{variant: "h5"}}
          title={<NavLink to={'/childdetail'}
          >{chld.fstname}</NavLink>}
            subheader={chld.username}
            
          />
          <CardContent>
            <ChoreList id={chld.id}/>
          </CardContent>
        
        </Card>
      )
    )
    : <CircularProgress />
    }
    
  </div>
  );
};



const mapStateToProps = (state) => { 

  return {
    childs : state.child.child,
    
    
 
  }    
}

export default connect(
  mapStateToProps, 
  {getChildren, deleteChild})(ChildList);

const ChildList=（道具）=>{
const classes=useStyles（）；
const fetch=props.getChildren
useffect（（）=>{
fetch（）
}，[fetch]）
const childProps=props.childs.child
返回(
{childProps&&childProps.length>0
？childProps.map（（chld，index）=>(
deleteChild（chld.id）}
>X
)
)
: 
}
);
};
常量mapStateToProps=（状态）=>{
返回{
childs:state.child.child，
}    
}
导出默认连接(
MapStateTops，
{getChildren，deleteChild}（ChildList）；

这段代码是杂务列表组件，在子列表中调用它，并将子id作为道具传递。所以它目前只显示一个孩子的家务。其他两张卡片在实际有杂务时不显示杂务

          /* ChoreList */

const ChoreList = (props) => {

  const {getChores, chore, id} = props


  useEffect(() => {
    
    getChores(props.id);


  }, []);

  const chores = props.chore.chore

  return (
    <div className="chore-wrap"> 
      
      {chores && chores.length > 0 
    ? chores.map((chore, index) => (
      
      <li key={index} type="none"> 
      {props.id === chore.child_id ? <Link to={'/chore'}><span>{chore.name}</span></Link> : <span>No Chores</span> }
        
      </li>  
      
      )
    )
    : <CircularProgress/>
    }
    </div>
  )
}

const mapStateToProps = (state) => {
  return {
    chore: state.chore.chore
  };
};


export default connect(
  mapStateToProps, {getChores}
)(ChoreList);

/*舞蹈列表*/
常量舞蹈列表=（道具）=>{
const{getchore，chore，id}=props
useffect（（）=>{
获取琐事（props.id）；
}, []);
const chores=props.chores.chores
返回(
{chores&&chores.length>0
？杂务映射（（杂务，索引）=>(

{props.id==chore.child_id？{chore.name}：无杂务}

)
)
: 
}
)
}
常量mapStateToProps=（状态）=>{
返回{
杂务：state.chore.chore
};
};
导出默认连接(
mapStateToProps，{getChores}
)（编舞清单）；