Žingsnis 12

Šiame žingsnyje pridėkime papildomo funkcionalumo, kad vartotojui būtų patogiau įvesti reikšmes.

12.01 Vartotojo vardo išsaugojimas

Dažna praktika, kad vartotojo vardas yra saugomas naršyklės atmintyje. Naudosime LocalStorage funkcionalumą.

Komponente AddFeedbackForm viršuje po importais aprašykime konstantą

failas: src/components/AddFeedbackForm.js

-import React, { useState } from 'react';
+import React, { useEffect, useState } from "react";

Tada funkcijos AddFeedbackForm viduje pridėkime specialią React konstrukciją useEffect.

failas: src/components/AddFeedbackForm.js

export default function AddFeedbackForm({ onCancel, onSubmit, initialValues = {} }) {
  
  const [score, setScore] = useState(initialValues.score);
  const [name, setName] = useState(initialValues.name || '');
  const [text, setText] = useState(initialValues.text || '');
  
+ const NAME_STORAGE_KEY = "author_name";
+ useEffect(() => {
+   const name = localStorage.getItem(NAME_STORAGE_KEY);
+   if (name) {
+     setName(name);
+   }
+ }, [setName]);

  // ...

useEffect efektas bus suvykdytas kai tik bus sukurtas komponentas ("componentDidMount").

Mūsų komponentas jau prisimins įvestą vardą. Tačiau negalės pakeisti įrašo atmintyje, jeigu vardas pasikeistų.

Padarykime pakeitimus, kad būtų galima pakeisti ir išsaugoti vartotojo vardą naršyklės LocalStorage.

Tam reiktų pakeisti handleFormSubmit() funkciją.

failas: src/components/AddFeedbackForm.js

// ...
function handleFormSubmit() {
  onAddFeedback({
    score, 
    name: name || DEFAULT_NAME, 
    text});
+ if (name) {
+   localStorage.setItem(NAME_STORAGE_KEY, name);
+ }
}
// ...

Dabar po formos patvirtinimo naršyklės atmintinėje bus įsimintas naujas vartotojo vardas.

Štai ir ženkliai pagerinome vartotojo patirtį.

Svarbūs momentai

• LocalStorage
• React hooks - useEffect

---

SEKANTIS ŽINGSNIS →