Блог

Я пытаюсь добавлять баллы в профиль пользователя при каждом нажатии кнопки. Очки должны накапливаться.

Я могу добавлять баллы в профиль при переходе к модальному компоненту (у которого есть кнопка для добавления баллов, которую можно нажать только один раз). Однако, когда я перезагружаю модал, теперь с отключенной кнопкой, баллы все еще обновляются, но становятся нулевыми.

Другая проблема заключается в том, что очки не накапливаются, вместо этого они заменяются каждый раз.

проблема в «баллах». Все остальное работает должным образом.

 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);
  

Я считаю, что вы хотите, чтобы это срабатывало только при начальной загрузке, удаление current из второго параметра для useEffect должно гарантировать, что useEffect запускается только при начальной загрузке … аналогично componentDidMount

   useEffect(() => {
    if (current) {
      setPointsNow(current.pointsNow);
    }
  }, []);
  

Если удаление ваших зависимостей помогло бы, то я бы не стал лгать о зависимостях, когда вы не хотите, чтобы ваш первый эффект использования изменял pointsNow только тогда, когда он был изменен, тогда я бы предпочел иметь начальное значение для pointsNow (у вас есть «»), тогда я бы изменил первый эффект использования на:

 useEffect( () => {
    if (current amp;amp; pointsNow === "") {
        setPointsNow(current.pointsNow);
    }
}, [current]);
  

И еще одна вещь, которая не имеет ничего общего с вашей текущей проблемой: я думаю, вы используете «useEffect» больше, чем вам нужно. Конечно, вы хотите вызывать «точки входа» при изменении точек, но почти каждый вызов функции зависит от чего-то, и с этой логикой мы бы передали каждую логику useEffect.

Я не знаю, как это будет расти так быстро, когда я неправильно понял, но сейчас вы могли бы просто иметь функцию handlerFunction, которая вызывает «logPoints» и вызывать эту функцию handleFunction при изменении точек. Теперь, когда я не делаю ошибок, вы меняете очки только в двух разных местах один раз в первом useEffect, а затем в «handleClick».

Я исправил 1-ю проблему:

Я могу добавлять баллы в профиль при переходе к модальному компоненту (у которого есть кнопка для добавления баллов, которую можно нажать только один раз). Однако, когда я перезагружаю модал, теперь с отключенной кнопкой, баллы все еще обновляются, но становятся нулевыми.

Выполнив следующее:

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

}, [points])