Discussion :

[thorgal1612]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

[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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

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

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
<Slider
	defaultValue={year}
// ...
>

defaultValue reçoit un tableau

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

[thorgal1612]

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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;

[gwyohm]

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

[thorgal1612]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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>
  );
}

[thorgal1612]

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

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)

[gwyohm]

ok, t'es sur de

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

filters.year.year__min,filters.year.year__max

si tu fais un console.log, tu as bien des valeurs cohérentes ?

[thorgal1612]

j'ai fait un

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

console.log(filters.year)

et j'ai ça

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

{year__min: 1950, year__max: 2017}

j'ai aussi affiché chaque valeur dans la console

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

J'obtiens ceci

1950 2017

J'ai affiché le state dans la console

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
const [year, setYear] = useState([filters.year.year__min, filters.year.year__max])
console.log( year)

j'obtiens ça

[undefined, undefined]

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

[gwyohm]

Alors,

Voilà ce que je pense :

Quand tu fais :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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;

[thorgal1612]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

[gwyohm]

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

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

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