Cześć, uczę się Reacta i mam pytanie odnośnie przechowywania danych(nie wiem czy to poprawne określenie) z pliku json.
Jak poprawnie używać danych z json? Czy wystarczy zaimportować plik i używać danych od razu czy powinienem przypisać te dane do stanu? Poniżej kilka przykładów o co mi chodzi:
- Używam danych z importu
import data from "./data.json";
const MyComponent = () => {
return (
<>
<ul>
{data.map((item, index) => (
<li key={index}>{item.name}</li>
))}
</ul>
<ul>
{data.filter(item => item.name === "Mark").map((item, index) => (
<li key={index}>{item.name}</li>
))}
</ul>
</>
);
}
- Przypisuje dane do stanu
import data from "./data.json";
const MyComponent = () => {
const [users, setUsers] = useState(data);
return (
<>
<ul>
{users.map((item, index) => (
<li key={index}>{item.name}</li>
))}
</ul>
<ul>
{users.filter(item => item.name === "Mark").map((item, index) => (
<li key={index}>{item.name}</li>
))}
</ul>
</>
);
}
- Przypisuje dane do stanu dopiero w useEffect
import data from "./data.json";
const MyComponent = () => {
const [users, setUsers] = useState([]);
useEffect( () => {
setUsers(data)
})
return (
<>
<ul>
{users.map((item, index) => (
<li key={index}>{item.name}</li>
))}
</ul>
<ul>
{users.filter(item => item.name === "Mark").map((item, index) => (
<li key={index}>{item.name}</li>
))}
</ul>
</>
);
}
- Przypisuje dane do stanu w useEffect i przefiltrowane dane też dodaję do stanu
import data from "./data.json";
const MyComponent = () => {
const [users, setUsers] = useState([]);
const [name, setName] = useState([])
useEffect( () => {
setUsers(data)
setName( () => (
users.filter(item => item.name === "Mark")
))
})
return (
<>
<ul>
{users.map((item, index) => (
<li key={index}>{item.name}</li>
))}
</ul>
<ul>
{name.map((item, index) => (
<li key={index}>{item.name}</li>
))}
</ul>
</>
);
}
Każdy z tych sposobów działa, ale zastanawiam się czy ma znaczenie w jaki sposób to zrobię. Może jeszcze inaczej? Będę wdzięczny za pomoc