javascript - 在 Typescript 和 React 中提交时更新 localStorage 值

Question

我想更新保存到我的 localStorage 的对象数组中的值。

对象已经在我的 localStorage 中。我想更新进度。

关键是技能，价值是阵法。

我的页面上有一个带有两个滑块的表单，用于跟踪时间（进度）。在提交时，我想更新进度。

我认为我对它的工作原理有一个重大误解，因为我没有让它工作。

[
{category: "crafting"
description: "Prepare yourself for cold times"
imageSrc: "https://images.unsplash.com/photo-1621490153925-439fbe544722?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1100&q=80"
isDone: false
progress: 500
title: "Knitting"},
{category: "mental"
description: "Take control over your mind"
imageSrc: "https://images.unsplash.com/photo-1554244933-d876deb6b2ff?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1100&q=80"
isDone: false
progress: 500
title: "Meditation"}]

这是我的更新值的 handleSubmit 函数。它由带有 2 个滑块（分钟）（小时）的表单控制

  function handleSubmit(event: React.FormEvent) {
    event.preventDefault();
    const hrs = parseInt(hours);
    const mins = parseInt(minutes);
    const addedHours = value + hrs + mins * 0.015;
    setValue(addedHours);
  }

这是我的 localStorage 的截图： localStorage

这是页面的整个代码：

export default function DetailPage(): JSX.Element {
  const [hours, setHours] = useState('0');
  const [minutes, setMinutes] = useState('0');
  const [value, setValue] = useState(0);
  const history = useHistory();
  const { skills } = useLocalStorageSkills();



  const { title }: { title: string } = useParams();
  const filteredSkills = skills.filter(
    (skills) => skills.title === String(title)
  );

  function handleSubmit(event: React.FormEvent) {
    event.preventDefault();
    const hrs = parseInt(hours);
    const mins = parseInt(minutes);
    const addedHours = value + hrs + mins * 0.015;
    setValue(addedHours);
  }

  const ranking =
    value === 0
      ? '0'
      : value < 99
      ? '1'
      : value > 100 && value < 199
      ? '2'
      : value > 200 && value < 299
      ? '3'
      : value > 300 && value < 399
      ? '4'
      : '5';

  const ranktrack = JSON.stringify(ranking);
  localStorage.setItem('ranking', ranking);

  const ranktrackparsed = JSON.parse(ranktrack);
  localStorage.getItem('ranking');

  return (
    <div className={styles.container}>
      {filteredSkills.map((skills) => (
        <Header
          {...skills}
          key={skills.title}
          title={skills.title}
          type="detail"
          imageSrc={skills.imageSrc}
          onClick={() => {
            history.push('/');
          }}
        />
      ))}

      <main className={styles.main}>
        {filteredSkills.map((skills) => (
          <ProgressTrack
            value={(skills.progress - value).toFixed(1)}
            rank={ranktrackparsed}
          />
        ))}
        <form className={styles.form} onSubmit={handleSubmit}>
          <Rangeslider
            size="hours"
            value={hours}
            min={'0'}
            max={'24'}
            onChange={(event) => setHours(event.target.value)}
          />
          <Rangeslider
            size="minutes"
            value={minutes}
            min={'0'}
            max={'59'}
            onChange={(event) => setMinutes(event.target.value)}
          />
          <ActionButton
            children={'Submit'}
            type={'submit'}
            style="primary"
          ></ActionButton>
        </form>
        {filteredSkills.map((skills) => (
          <ProgressBar
            percentageVal={value}
            textVal={value.toFixed(1)}
            minValue={1}
            maxValue={500}
            children={skills.description}
          />
        ))}
      </main>
      <Navigation activeLink={'add'} />
    </div>
  );
}

这里我有一个自定义钩子，可以使用 localStorage：

import useLocalStorage from './useLocalStorage';
import type { Skill } from '../../types';

export default function useLocalStorageSkills(): {
  skills: Skill[];
  addSkill: (skills: Skill) => void;
  removeSkill: (newSkill: Skill) => void;
  editSkill: (oldSkill: Skill, newSkill: Skill) => void;
} {
  const [skills, setSkills] = useLocalStorage<Skill[]>('skills', []);

  function addSkill(skill: Skill) {
    setSkills([...skills, skill]);
  }

  function removeSkill(newSkill: Skill) {
    setSkills(skills.filter((skill) => skill !== newSkill));
  }

  function editSkill(deleteSkill: Skill, newSkill: Skill) {
    setSkills([
      ...skills.filter((skill) => skill.title !== deleteSkill.title),
      newSkill,
    ]);
  }

  return { skills, addSkill, removeSkill, editSkill };
}

这是我的第一个问题，如果您需要更多信息，我会尽力提供更多信息。

标签： javascriptreactjstypescriptlocal-storage