React redux slider NAN

Version imprimable

Bonjour,

J'ai une page présente des offres de vente, je voudrais ajouter dans ma liste un filtre sur l'année avec un slider dont le minimum correspond à l'année la plus petite de mes offres et le maximum avec l'année la plus grande mes offres

Mon problème est que sur mon slider j'ai la valeur "Nan" qui apparait sur le minimum...je précise que je débute avec react-redux

Code:

const [year, setYear] = useState([filters.year.year__min,filters.year.year__max])
Code:

1 2 3 const handleChange = (event, newValue) => { setYear(newValue); };
Code:

1 2 3 function valuetext(value) { return `${year}`; }
Code:

1 2 3 4 5 6 7 8 9 <Slider defaultValue={year} onChange={handleChange} valueLabelDisplay="auto" aria-labelledby="range-slider" getAriaValueText={valuetext} min={filters.year.year__min} max={filters.year.year__max} >
Merci pour votre aide.

30/04/2020, 16h31
gwyohm
salut,

tu donnes pas mal de fragments de code, mais c'est assez dur de suivre où tout ca se retrouve en global.

Néanmoins, quelques pistes pour toi :

Code:

const [year, setYear] = useState([filters.year.year__min,filters.year.year__max])

attention, la variable year est donc un tableau.
donc...
Code:

1 2 3 4 <Slider defaultValue={year} // ... >
defaultValue reçoit un tableau
Code:

1 2 3 function valuetext(value) { return `${year}`; }
ton paramètre est value, mais tu renvoies year... c'est voulu ? je pense que ca doit pas faciliter le debug.

Merci d'avoir répondu, c'est vrai que ce n'est pas très clair, du coup je mets tout.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
 
function OfferSidebarContent(props) {
 
	const filters = useSelector(({ offerApp }) => offerApp.filterOffers);	
	const labelsOffer = useSelector(({ offerApp }) => offerApp.labelsOffer);	
 
	const [year, setYear] = useState([filters.year.year__min,filters.year.year__max])
	const [defaultYear] = useState([filters.year.year__min,filters.year.year__max])
	const classes = useStyles(props);
 
	const handleChange = (event, newValue) => {
		setYear(newValue);
	  };
 
 
	function valuetext(year) {
		return `${year}`;
	}
 
 
 
	return (
		<FuseAnimate animation="transition.slideUpIn" delay={400}>
			<div className="flex-auto border-l-1 border-solid">
				<div className="p-24">
					<Button
 
						component={Link}
						to="/offers/offer/new"
						variant="contained"
						color="primary"
						className="w-full"
					>
						AJOUTER UNE OFFRE
					</Button>
				</div>
 
				<div className={classes.listWrapper}>
 
					<ListSubheader className={classes.listSubheader} disableSticky>
							MILLESIME
					</ListSubheader>
					<div className="p-24"> 
						<Slider
							defaultValue={defaultYear}
							value={year}
							onChange={handleChange}
							valueLabelDisplay="auto"
							aria-labelledby="range-slider"		
							getAriaValueText={valuetext}
							min={filters.year.year__min}
							max={filters.year.year__max} 
						>
 
						</Slider>
					</div>																		
				</div>
			</div>
		</FuseAnimate>
	);
}
 
export default OfferSidebarContent;

30/04/2020, 20h52
gwyohm

ce qui serait super, c'est de voir le code de Slider

Citation:

Envoyé par gwyohm

ce qui serait super, c'est de voir le code de Slider

j'utilise le slider de material https://material-ui.com/components/slider/

Dans leur exemple, ils mettent les valeurs en dur mais moi je veux qu'elle correspondent aux minimum et maximum des années saisie sur les offres de ventes

Si je fais comme l'exemple en mettant les valeurs en durs, ça fonctionne

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
 
import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import Typography from '@material-ui/core/Typography';
import Slider from '@material-ui/core/Slider';
 
const useStyles = makeStyles({
  root: {
    width: 300,
  },
});
 
function valuetext(value) {
  return `${value}°C`;
}
 
export default function RangeSlider() {
  const classes = useStyles();
  const [value, setValue] = React.useState([20, 37]);
 
  const handleChange = (event, newValue) => {
    setValue(newValue);
  };
 
  return (
    <div className={classes.root}>
      <Typography id="range-slider" gutterBottom>
        Temperature range
      </Typography>
      <Slider
        value={value}
        onChange={handleChange}
        valueLabelDisplay="auto"
        aria-labelledby="range-slider"
        getAriaValueText={valuetext}
      />
    </div>
  );
}

01/05/2020, 11h29
thorgal1612

Je pense que c'est lié à cette erreur mais je n'arrive pas à la résoudre

Citation:

Warning: Received NaN for the `children` attribute. If this is expected, cast the value to a string.
in span (created by ValueLabel)
in span (created by ValueLabel)
in span (created by ValueLabel)
in span (created by ForwardRef(Slider))
in ValueLabel (created by WithStyles(ValueLabel))
in WithStyles(ValueLabel) (created by ForwardRef(Slider))
in span (created by ForwardRef(Slider))
in ForwardRef(Slider) (created by WithStyles(ForwardRef(Slider)))
in WithStyles(ForwardRef(Slider)) (at OfferSidebarContent.js:128)
in div (at OfferSidebarContent.js:127)
in div (at OfferSidebarContent.js:104)
in div (at OfferSidebarContent.js:87)
01/05/2020, 17h52
gwyohm

ok, t'es sur de

Code:

filters.year.year__min,filters.year.year__max

si tu fais un console.log, tu as bien des valeurs cohérentes ?
01/05/2020, 18h17
thorgal1612
j'ai fait un

Code:

console.log(filters.year)

et j'ai ça

Code:

{year__min: 1950, year__max: 2017}

j'ai aussi affiché chaque valeur dans la console

Code:

console.log( filters.year.year__min, filters.year.year__max)

J'obtiens ceci

Citation:

1950 2017

J'ai affiché le state dans la console
Code:

1 2 const [year, setYear] = useState([filters.year.year__min, filters.year.year__max]) console.log( year)
j'obtiens ça

Citation:

[undefined, undefined]

Je ne comprends pas pourquoi j'obtiens ce résultat

Alors,

Voilà ce que je pense :

Quand tu fais :

Code:

const filters = useSelector(({ offerApp }) => offerApp.filterOffers);

Initialement, ton store n'est pas complètement initialisé, year__min et year__max ne sont pas encore initialisés.

Du coup, tu stockes dans le state de ton composant des valeurs undefined.

Ca marche avec les console.log pcq tu log des objets qui sont mis à jour (quand ton store est initialisé, les propriétés obtiennent les valeurs que tu attends).

Du coup, je te propose un essai:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
 
function OfferSidebarContent(props) {
 
	const filters = useSelector(({ offerApp }) => offerApp.filterOffers);
	const labelsOffer = useSelector(({ offerApp }) => offerApp.labelsOffer);	
 
	const [year, setYear] = useState([filters.year.year__min,filters.year.year__max])
	const [defaultYear, setDefaultYear] = useState([filters.year.year__min,filters.year.year__max])
        // on ajoute un effet sur la mise à jour de filters pour mettre à jour le state
        useEffect(() => {
          setYear([filters.year.year__min,filters.year.year__max]);
          setDefaultYear([filters.year.year__min,filters.year.year__max]);
        }, [filters]);
	const classes = useStyles(props);
 
	const handleChange = (event, newValue) => {
		setYear(newValue);
	  };
 
 
	function valuetext(year) {
		return `${year}`;
	}
 
        // on va régler un probleme a la fois, si on n'a pas de year__min, on renvoie rien
	if (typeof filters.year.year__min === 'undefined') return null;
 
	return (
		<FuseAnimate animation="transition.slideUpIn" delay={400}>
			<div className="flex-auto border-l-1 border-solid">
				<div className="p-24">
					<Button
 
						component={Link}
						to="/offers/offer/new"
						variant="contained"
						color="primary"
						className="w-full"
					>
						AJOUTER UNE OFFRE
					</Button>
				</div>
 
				<div className={classes.listWrapper}>
 
					<ListSubheader className={classes.listSubheader} disableSticky>
							MILLESIME
					</ListSubheader>
					<div className="p-24"> 
						<Slider
							defaultValue={defaultYear}
							value={year}
							onChange={handleChange}
							valueLabelDisplay="auto"
							aria-labelledby="range-slider"		
							getAriaValueText={valuetext}
							min={filters.year.year__min}
							max={filters.year.year__max} 
						>
 
						</Slider>
					</div>																		
				</div>
			</div>
		</FuseAnimate>
	);
}
 
export default OfferSidebarContent;

En effet, ça vient bien du fait que mon store n'est pas initialisé

Du, coup j'ai fait différemment et ça fonctionne.

je récupère mes filtres dans le composants parent et je passe les informations dans les props de mon composant quand les infos sont chargées.
Je ne sais pas si c'est une bonne solution mais ça fonctionne

Dans le composant parent

Code:

const filters = useSelector(({ offerApp }) => offerApp.filterOffers);
Code:

1 2 3 4 5 6 7 8 leftSidebarContent={filters.year.year__max && <OfferSidebarContent yearMax={filters.year.year__max} yearMin={filters.year.year__min} priceMin={filters.price.price__min} priceMax={filters.price.price__max}/> }
Dans mon composant
Code:

1 2 3 const [year, setYear] = useState([props.yearMin,props.yearMax]) const [price, setPrice] = useState([props.priceMin,props.priceMax])
J'ai une autre question, (s'il est préférable de créer un autre topic je le ferai)

J'ai un filtre avec liste de valeur ['valeur1','valeur2']
j'ai des datas
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 dataUser: [ { id: 1, appelation: 'Valeur 1', }, { id: 2, appelation: 'Valeur 2', }, { id: 3, appelation: 'Valeur 1', }, { id: 4, appelation: 'Valeur 3', }, ]
Je voudrais filtrer les datas sur le champ "appelation" qui ont les valeurs de mon filtre

En tout cas, merci pour ton aide qui m'a été utile.

03/05/2020, 16h56
gwyohm

Citation:

Envoyé par thorgal1612

Du, coup j'ai fait différemment et ça fonctionne.

cool, n'oublie pas de marquer comme résolu ;)

Citation:

Envoyé par thorgal1612

J'ai une autre question, (s'il est préférable de créer un autre topic je le ferai)

c'est préférable, ainsi quelqu'un qui a un problème ou une question similaire à la tienne verra un sujet plus clair