时间戳

首页 > 解决方案 > 为用户评分添加积分反应

reactjs - 为用户评分添加积分反应

问题描述

每次按下按钮时，我都会尝试向用户配置文件添加点。积分应该累积。

进入模态组件时，我可以将点添加到配置文件中（该组件具有添加点的按钮，并且只能按下一次）。但是，当我重新加载模式时，现在使用禁用的按钮，点仍在更新但将变为空。

另一个问题是积分没有被累积，而是每次都被替换。

“点”是问题。其他一切正常。

const EventLog = ({ current, logPointsNow, logPoints }: IEventLog) => {
  const [dateLogged, setDateLogged] = useState("");
  const [points, setPoints] = useState("");

  useEffect(() => {
    if (current) {
      setDateLogged(current.dateLogged);
    }
  }, [current]);

  const handleClick = () => {
    setDateLogged(Date());
    setPoints(points + String(50));
  };

  useEffect(() => {
    const updatedDate = {
      dateLogged,
    };
    logPointsNow(updatedDate);
  }, [dateLogged]);

  useEffect(() => {
    const meetingPoints = {
      points,
    };
    logPoints(meetingPoints);
  }, [points]);

  return (
    <IonContent>
      <UserPoints />
      <IonButton
        type="submit"
        expand="block"
        onClick={handleClick}
        disabled={arrivalTime ? true : false}
      >
        Log
      </IonButton>
      <IonItem>
        <IonLabel>Points earned: {points}</IonLabel>
      </IonItem>
    </IonContent>
  );
};

const mapStateToProps = (state: IEventLogReduxProps) => ({
  current: state.event.current,
});

export default connect(mapStateToProps, { logPointsNow, logPoints })(EventLog);

这是获取用户信息的组件：

const UserPoints = ({ auth }: IUserP) => {
  return (
    <IonItem>
      {auth!.user.points}
      {auth!.user.name}
    </IonItem>
  );
};

const mapStateToProps = (state: IAuthReduxProps) => ({
  auth: state.auth,
});

export default connect(mapStateToProps, null)(UserPoints);

标签： reactjs

解决方案

我修复了第一个问题：

当进入模态组件时，我可以将点添加到配置文件中（该组件具有添加点的按钮，并且只能按下一次）。但是，当我重新加载模式时，现在使用禁用的按钮，点仍在更新但将变为空。

通过执行以下操作：

useEffect(()=>{
  
 if(dateLogged) {
  const meetingPoints = {
  points
};
logPoints(meetingPoints)
 }

}, [points])

推荐阅读