web-dev-qa-db-ja.com

Reactネイティブ-別の関数で「useState（）」を使用する方法

別の関数から状態の値を更新しようとしています。

私はそれらをそのように宣言しました：

_
const App () => {

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

}
_

App外に別の関数があります：

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

}
_

setPosition()を呼び出すと、エラーが発生します。

Cant find変数：setPositionAX

Cant find変数：setPositionAY

const [positionAX, setPositionAX] = useState(100)をファイルの先頭に移動しようとしましたが、エラーが発生しました：

無効なフック呼び出し。フックは、関数の本体内でのみ呼び出すことができます。

他の関数からその変数を更新するにはどうすればよいですか？

@ t-j-crowderの編集1

これを機能させることができないようです。何が悪いのかわかりません

ここにあなたが私に与えたコードのライブスナックの例があります： https://snack.expo.io/Cd!hwDQ0m

アラートを追加した場合：

_alert("pressed")
_

HandleClick関数に入ると、何らかの理由でsetPositionA([200, 200])で機能しません。

また、追加のメモとして：私のアプリの例では、2つの機能と状態を設定する機能があり、状態を表示する機能は分離されていますこれが、最初のスタックオーバーフローポストで提示するつもりの問題が発生する理由です。

ここに私が達成しようとしているその例のスナックがあります：

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

'positionX'と 'positionY'を変数として使用して、レンダリングされる要素の上部と左側の位置を定義していますが、positionXおよびpositionY変数の実際の設定は別の関数で行われる

私はジュニア開発者ですので、これにご協力いただきありがとうございました。また、これがすごいことである場合はお詫び申し上げます。

編集2：ムハンマドヌマン

私はあなたの方法を試しました、そしてそれを働かせるために私はちょうど見ることができません。何を達成したいのか、どこで達成したいのか、混乱していると思います。私はnoobie開発者なので、それはおそらく私の責任ですので、ご容赦ください。すべてのコードを投稿したくなかったのは、人々がダンプをコード化して「これを修正する」ようになるのが嫌だからですが、この状況ではおそらく最高です。

これが私のコードの完全なスナックです： https://snack.expo.io/uk8yb5xys

私が欲しいのはこれです：

ユーザーは、単語「開始」から単語「終了」まで線を引くように指示されます。線が描かれ、ユーザー線の始点と終点が指定されたパスに一致する場合、ユーザーは線を引くために別の線が表示され、「開始」と「終了」の位置が移動するので、ユーザーはどこに描くべきかわかります。

コメント行があります：

//ここIS開始と終了の値を更新する必要がある場所

ここで、単語「開始」と「終了」が新しい位置に移動する必要があります。

現時点では、完全な線を描き、画面から指を離しても、何も起こりません。ただし、最初と最後に指を置くと、動きます。ユーザーが指を離したときに移動する必要があります。

お時間をいただきありがとうございます。

javascriptreact-nativescopehook
3
JamesG

値（この場合は200）を小道具としてApp関数コンポーネントに送信できます。 React.useEffect()は、小道具の変更を聞くのに役立ちます。したがって、値を設定したいときはいつでもできます。

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