Je travaille sur un composant de réaction dynamique qui affichera les profils d'entreprise en fonction de l'ID d'itinéraire. J'utilise actuellement des exemples de données à partir d'un fichier data.js qui ne stocke que les données.
Problème Lorsque je clique sur la page dynamique, toutes les données se chargent la première fois. Ensuite, lorsque j'actualise, je lance une erreur: `` Impossible de lire le nom de propriété d'undefined '', donc je suppose que les données ne se rechargent pas, mais je ne sais pas comment faire en sorte que les données restent sur le rechargement de la page. Code ci-dessous:
DynamicPage.js
import uuid from 'uuid/v1';
export default [
{
id: uuid(),
name: 'exampleone',
investors: ['x', 'y', 'z'],
website: "https://exampleone.com",
},
{
id: uuid(),
name: 'exampletwo',
investors: ['n', 'm', 'l'],
website: "https://exampletwo.com",
},
{
id: uuid(),
name: 'examplethree',
investors: ['a', 'b', 'c'],
website: "https://examplethree.com",
}
]
data.js
XXX
4 Réponses :
Vous pouvez utiliser useMemo comme ceci:
import React, { useMemo } from 'react';
const company = useMemo(() => users.find((row) => {
return match.params.id == row.id
}), [users]);
Merci Fayeed. Quand je fais cela, j'obtiens la même erreur. Est-ce que tu sais pourquoi?
'impossible de lire le nom de propriété non défini' - comme avec mon code ci-dessus.
Je pense que vous voulez appeler à partir de l'état, donc, si vous créez l'état par useState, cela signifie que vous créez une variable avec lui. retour à l'ancien code.
import React, { useState } from 'react';
import { Overview } from './maincomp/components'
import data from '../UserList/data'
const SearchCompany = ({match}) => {
const [users] = useState(data);
const company = () => {
return (
users.find((row) =>match.params.id === row.id)?.name )
}
return(
<div>
{company}
</div>
)
}
export default SearchCompany
** Remarque supprimée data.js et ajoutée à la question
Merci Hakim. J'ai mis à jour mon code ci-dessus pour refléter votre réponse, mais je reçois toujours le message d'erreur "Rien n'a été renvoyé par le rendu", savez-vous pourquoi?
Non, cela indique "Rien n'a été renvoyé par le rendu"
essayez de supprimer '' 'else {return null}' ''
Merci Hakim! J'obtiens maintenant une erreur d'analyse "jeton inattendu.?"
? .nom pas.? nom
Oui, cela a ensuite jeté une autre erreur "Attendu un appel d'affectation ou de fonction et a plutôt vu une expression" - désolé pour toutes les questions!
Merci beaucoup Hakim, cela a du sens. Il charge mais ne charge pas les données du fichier de données importé. EG quand je tape {company.name}, il imprime "company", au lieu du nom de cette entreprise.
J'ai ajouté data.js pour le contexte sur les données que je veux rendre
dans ce code, vous avez ajouté? .name in company .. donc, vous n'avez pas besoin de renvoyer le nom en retour , donc il suffit de retourner (
Merci - il apparaît toujours comme "société" - Je veux pouvoir appeler toutes les données pour chaque entrée (par exemple, nom, investisseurs, site Web) sur la page dynamique, mais je reçois toujours la société pour le nom lorsque je le modifie le façon dont tu parles
ooh je vois, donc le point, vous voulez que cela montre toutes les données
Oui, tu sais comment je peux faire ça?
Merci! Dans la réponse ci-dessus ou?
import React, { useState } from 'react';
import { Overview } from './maincomp/components'
import data from '../UserList/data'
const SearchCompany = ({match}) => {
const [users, setUsers] = useState(data);
const [name, setName] = useState("");
useEffect(() => {
if (users) {
users.find(row => {
if (match.params.id === row.id) {
setName(() => row.name);
}
});
}
}, [match, users]);
return(
<div>
{company.name}
</div>
)
}
export default SearchCompany
Merci Manan, mais quand je fais cela, j'obtiens la même erreur: cela fonctionne quand je clique dessus, mais pas quand je le rafraîchis. Lorsque j'actualise, j'obtiens «impossible de lire le nom de propriété non défini», et je veux qu'il reste en cours d'actualisation.
Voulez-vous créer une codesandbox qui reproduit votre problème?
Merci Manan, essayer de créer un bac à sable mais avoir du mal à créer en tant que projet est complexe, donc beaucoup de choses sont nécessaires, le seul problème que j'ai est que lorsque j'actualise la page, je ne peux plus lire les données qui ont été envoyées à il.
J'ai utilisé le code que vous avez publié et créé ce bac à sable. Vérifiez-le et faites-moi savoir si cela résoudra votre problème.
Merci Manan! Je ne pense pas que cela résout mon problème. Si je prends votre exemple, ce que je veux, c'est aller sur "page /: id" et afficher les données pertinentes pour cet identifiant. En ce moment, je fais ça, mais quand je me rafraîchis, ça disparaît.
Tout ce que je peux dire à partir des informations que vous avez fournies, c'est que vous devrez faire une sorte d'appel useEffect pour obtenir les résultats souhaités
Merci Manan! Nous essaierons de mettre en œuvre et de publier la solution une fois terminé.
continuons cette discussion dans le chat .
if you want to call all data, and the id is equal with someId, <br/>
you must to loop it first. <br/>
import React, { useState } from 'react';
import { Overview } from './maincomp/components'
import data from '../UserList/data'
import {useParams} from 'react-router-dom' //if use this to call params
const theData = data
const id = useParams()
const company = () => {
return (
theData.map(item =>
<div>
Id: {item.find(_item => _item.id === id)?.id}
Name: {item.find(_item => _item.id === id)?.name}
Websites: {item.find(_item => _item.id === id)?.website}
</div>
))
}
//use this
const company2 = () => {
return (
<div>
id: {theData.find(item => item.id === id)?.id}
Name: {theData.find(item => item.id === id)?.name}
Website: {theData.find(item => item.id === id)?.website}
Investors: {theData.find(item => item.id === id)?.investors.map(__item => <div>{__item}</div> ) }
</div>
)
}
return(
<div>
{company()}
{company2()}
</div>
)
}
export default SearchCompany
data.js
export default [
{
id: uuid(),
name: 'exampleone',
investors: ['x', 'y', 'z'],
website: "https://exampleone.com",
},
{
id: uuid(),
name: 'exampletwo',
investors: ['n', 'm', 'l'],
website: "https://exampletwo.com",
},
{
id: uuid(),
name: 'examplethree',
investors: ['a', 'b', 'c'],
website: "https://examplethree.com",
}
]
Merci encore Hakim, mais lorsque j'appelle la société, elle imprime ensuite l'ensemble de données. Je souhaite uniquement imprimer la ligne de données correspondante.
Voir data.js, donc par exemple sur "page /: id", je veux afficher le nom, les investisseurs et le site Web de cet identifiant d'entreprise. Au rafraîchissement, je veux qu'il reste là
ooh je vois, alors ajoutez-y
Il apparaît que item.find n'est pas une fonction maintenant.
ma faute n'est pas item.find mais {theData.find (_item => _item.id === id) ?. id}
Merci. Cela apparaît juste vide, donc je reçois quand j'appelle la société () J'obtiens l'ID: Nom: Sites Web 3 fois car il appelle toujours tout
continuons cette discussion dans le chat .
Merci Hakim, j'ai ouvert un chat pour en discuter.
Je l'espère utilement
Non, il apparaît toujours juste id: nom: site Web: investisseurs, pas de données