web-dev-qa-db-fra.com

React Native - comment utiliser 'useState ()' dans une autre fonction

J'essaie de mettre à jour la valeur d'un état à partir d'une autre fonction.

Je les ai déclarés comme ceci:


const App () => {

const [positionAX, setPositionAX] = useState(100)
const [positionAY, setPositionAY] = useState(100)

}

en dehors de App j'ai une autre fonction:

const setPosition = () => {
    setPositionAX(200);
    setPositionAY(200);

}

Quand j'appelle setPosition() j'obtiens l'erreur:

Impossible de trouver la variable: setPositionAX

Impossible de trouver la variable: setPositionAY

J'ai essayé de déplacer const [positionAX, setPositionAX] = useState(100) en haut de mon fichier, mais j'ai eu l'erreur:

Appel de hook non valide. Les hooks ne peuvent être appelés qu'à l'intérieur du corps d'une fonction.

Comment mettre à jour cette variable à partir d'autres fonctions?

Modifier 1 pour @ t-j-crowder

Je n'arrive pas à faire fonctionner ça, je ne suis pas sûr de ce que je fais de mal

Voici un exemple de collation en direct du code que vous m'avez donné: https://snack.expo.io/Cd!hwDQ0m

Si j'ajoute une alerte:

alert("pressed")

Dans la fonction handleClick, cela fonctionne donc pour une raison quelconque, il ne fonctionne tout simplement pas avec la setPositionA([200, 200]).

Aussi comme note supplémentaire: Dans mon exemple d'application, il y a deux fonctions et la fonctionnalité de définition de l'état, et la fonctionnalité d'affichage de l'état sont séparées c'est pourquoi je reçois le problème que je voulais présenter dans mon message initial sur le débordement de Stack.

Voici une collation de cet exemple de ce que j'essaie de réaliser:

https://snack.expo.io/6TUAkpCZM

J'utilise "positionX" et "positionY" comme variables pour définir la position supérieure et gauche d'un élément qui sont rendus, cependant, le paramètre réel des variables positionX et positionY est fait dans une autre fonction

Je suis un développeur junior, je tiens donc à vous remercier pour toute votre aide et à m'excuser si c'est super nooby.

Modifier 2 pour: Muhammad Numan

J'ai essayé votre chemin et je n'arrive tout simplement pas à le faire fonctionner. Je pense qu'il y a une certaine confusion quant à ce que je veux réaliser et où je veux y parvenir. C'est probablement ma faute car je suis un développeur noobie, alors pardonnez-moi. Je ne voulais pas simplement publier tout mon code car je pense que c'est mal vu pour les gens de simplement faire un vidage de code et d'être comme "réparer ça" - cependant, pour cette situation, c'est probablement le meilleur haha.

Voici une collation complète de mon code: https://snack.expo.io/uk8yb5xys

Ce que je veux, c'est ceci:

L'utilisateur est invité à tracer une ligne entre le mot "début" et le mot "fin". Si la ligne est dessinée et que le point de départ et le point final de la ligne utilisateur correspondent au chemin donné, ils sont alors présentés avec une autre ligne à dessiner et la position de "début" et "fin" se déplacera pour que l'utilisateur sache où dessiner.

Il y a une ligne de commentaire:

// ICI IS O JE DOIS METTRE À JOUR LES VALEURS DE DÉBUT ET DE FIN

C'est là que j'ai besoin du mot "début" et du mot "fin" pour se déplacer vers leurs nouvelles positions.

Pour le moment, lorsque vous tracez une ligne complète et retirez votre doigt de l'écran, rien ne se passe. Cependant, lorsque vous posez votre doigt, le début et la fin bougent. J'ai besoin qu'ils bougent lorsque l'utilisateur lève le doigt.

J'apprécie votre temps avec ceci alors merci.

javascriptreact-nativescopehook
3
JamesG

Nous pouvons envoyer les valeurs (dans notre cas, 200) comme accessoires au composant de fonction App. React.useEffect() aide à écouter les changements dans les accessoires. Donc, chaque fois que nous voulons définir les valeurs, nous pouvons.

Parent.js

    class Parent extends React.Component {

        constructor(props) {
            super(props)
            this.state = {
                x: 0,
                y: 0
            }
        }

        clickHandler = () => {            
            this.setState({
                x : 200,
                y : 200
            })
        }

        render() {
            return (
                <div>
                    <Button onPress={this.clickHandler} title="set 200"/>
                    <App setX={this.state.x} setY={this.state.y} />
                </div>
            )
        }

    }

App.js

    const App = (props) => {
        const [positionAX, setPositionAX] = React.useState(100)
        const [positionAY, setPositionAY] = React.useState(100)

        React.useEffect(()=>{
            setPositionAX(props.setX)
            setPositionAY(props.setY)
        })
        return <div>{positionAX}, {positionAY}</div>  //displays the position
    }
0
MukeshVM14