J'essaie d'avoir une page de filtre alimentaire selon laquelle l'utilisateur appuie sur les boutons pour indiquer leur préférence afin que, pour confirmer, je pourrais avoir la préférence de l'utilisateur stockée comme sur l'objet avec les touches filtre.js p> "zone", " Cuisine "et" prix " code>. Après avoir essayé diverses combinaisons, l'objet enregistré que je reçois ne conserve que refléter une modification de la première mise à jour de la zone. {"Zone": "South", "Cuisine": Array [], "Prix": -Infinity} Code> au lieu de {"Zone": "South", "Cuisine": " Cuisine japonaise "," prix ": 3} code>. Comment faire face à cette nature async de Statetate code> pour obtenir toutes les mises à jour correctes? (Les fonctions de presse de la poignée sont transmises à la composante enfants pour la cuisine et le prix de la zone) 
p> const CuisineSelection = ({ handleCuisinePress }) => {
const [selected, setSelected] = React.useState([]);
const cuisine = [
"Asian",
"Western",
"Chinese",
"Korean",
"Indian",
"Japanese",
"Cafe",
"Local",
];
const handlePress = (cuisine) => {
selected.includes(cuisine)
? setSelected(selected.filter((s) => s !== cuisine))
: setSelected([...selected, cuisine]);
};
const buttons = () =>
cuisine.map((items) => (
<TouchableOpacity
key={items}
onPress={() => {
handlePress(items);
handleCuisinePress(selected);
}}
style={[
styles.button,
{
backgroundColor: selected.includes(items)
? "silver"
: "white",
},
]}
>
p>
3 Réponses :
Vous pouvez définir une plage de valeurs attendue et replier de manière conditionnelle à une valeur par défaut.
const handlePricePress = (price) => {
const max = price >= 0 ? Math.max(...price) : 0;
setFilters((prevState) => ({ ...prevState, price: max }));
};
Désolé, cela n'atteint pas le problème que je suis confronté à cause de la nature async de l'instate
Pouvez-vous justifier ce que vous voulez réaliser exactement?
Une fois appuyé sur les boutons de chaque section, sur la confirmation, appuyez sur le journal que je m'attends à obtenir devrait être {"Zone": "South", "Cuisine": "Cuisine japonaise", "Prix": 3}, mais je reçois { "Zone": "Sud", "Cuisine": Array [], "Prix": -Infinity} Au lieu de cela, je ne sais pas vraiment comment obtenir l'état à mettre à jour correctement
L'indicatif régional fonctionne réellement correctement. Le problème est dans ce code dans lequel vous appelez deux fonctions State State: Le meilleur moyen de gérer ce monde soit pour vous débarrasser de l'état du composant interne et de le lire directement à partir des filtres: P> Guidicress code> Définit l'état du composant interne, puis HandlecuisinePress code> Lit cet état et l'établit sur les filtres. Toutefois, étant donné que l'état de réglage est asynchronisé lorsque handlecuisineinspress code> est appelé, il utilise les anciennes valeurs d'état depuis les résultats code> manutention code> ne sont pas encore appliqués. p> // Declare array outside of component to not create it on every render
const cuisine = [
"Asian",
"Western",
"Chinese",
"Korean",
"Indian",
"Japanese",
"Cafe",
"Local",
];
const CuisineSelection = ({ handleCuisinePress, cuisine }) => {
const buttons = () =>
cuisine.map((items) => (
<TouchableOpacity
key={items}
onPress={() => {
handleCuisinePress(items);
}}
>
const handlePress = (cuisine) => {
let newSelected = [];
if (selected.includes(cuisine)) {
newSelected = selected.filter((s) => s !== cuisine);
} else {
newSelected = selected.concat(cuisine);
}
setSelected(cuisine);
handleCuisinePress(newSelected);
};
The selected state you pass to handleCuisinePress is not up to date, you shouldn't rely on it, just pass the new state you calculated in handlePress to handleCuisinePress
Avez-vous un bouton unique qui appelt toutes les 3 fonctions de gestionnaire?
@vunski L'écran est divisé en 3 sections, de sorte que, par exemple, la section Zone dispose de boutons nord-sud-ouest que ONPLAY appellera HandleAreAppAppAppaPress, identité pour le reste des sections.
Je ne peux pas vraiment envelopper ma tête en cela car je ne peux pas l'essayer, une solution évidemment la plus simple se scinderait tous les 3 dans leur propre usestate.
Comment appelez-vous ces filtres? Je pense que c'est mieux si vous ajoutez le reste du code du composant.
@Clarity Très bien, j'ai mis à jour le post