javascript - React Native - 如何在另一个函数中使用 'useState()'

Question

我正在尝试从另一个函数更新状态的值。
我已经这样声明了它们:

const App () => {

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

}

App 之外我还有另一个功能:

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

}

当我调用 setPosition()我得到错误:

Cant find Variable: setPositionAX

Cant find Variable: setPositionAY

我试图移动 const [positionAX, setPositionAX] = useState(100)到我的文件的顶部，但后来我得到了错误:

Invalid hook call. Hooks can only be called inside of the body of a function.

如何从其他函数更新该变量？
为@t-j-crowder 编辑 1
我似乎无法让它工作，我不确定我做错了什么
这是您给我的代码的实时小吃示例:https://snack.expo.io/Cd!hwDQ0m
如果我添加警报:

alert("pressed")

进入 handleClick 函数，由于某种原因它不能与 setPositionA([200, 200]) 一起工作。 .
另请注意:
在我的应用示例中，有两个功能和设置状态的功能，以及显示状态的功能是分开的，这就是为什么我遇到了我在最初的堆栈溢出帖子中提出的问题。
这是我想要实现的那个例子的一个小吃:
https://snack.expo.io/6TUAkpCZM
我使用 'positionX' 和 'positionY' 作为 vars 来定义渲染出来的元素的顶部和左侧位置，但是 positionX 的实际设置和 positionY变量在另一个函数中完成
我是一名初级开发人员，所以我真的要感谢你在这方面的所有帮助，如果这是 super 笨蛋，我也深表歉意。
编辑 2:穆罕默德·努曼
我试过你的方法，但我似乎无法让它工作。我认为对于我想要实现的目标以及想要实现的目标存在一些困惑。这可能是我的错，因为我是一个新手开发者，所以请原谅我。我不想只发布我所有的代码，因为我认为人们不赞成只转储代码并像“修复这个”一样 - 但是，对于这种情况，它可能是最好的哈哈。
这是我的代码的完整小吃:https://snack.expo.io/uk8yb5xys
我想要的是这样的:
指示用户从单词“start”到单词“end”画一条线。如果绘制了线并且用户线的起点和终点与给定的路径匹配，那么他们将显示另一条线来绘制并且“开始”和“结束”的位置将移动，以便用户知道在哪里绘制。
有一个注释行:

// HERE IS WHERE I NEED TO UPDATE THE VALUES FOR START AND END

这就是我需要“开始”这个词和“结束”这个词来移动到他们的新位置的地方。
目前，当您画一条完整的线并将手指从屏幕上移开时 - 没有任何 react 。但是，当您将手指放下时，开始和结束移动。当用户抬起手指时，我需要它们移动。
我很感激您花时间在这方面，所以谢谢您。

Answer 1

三个选项:

A. 将这些函数作为参数发送并使用 curried functions :

const setPositionFactory = (setPositionAX, setPositionAY) => (pos = 200) => {
    setPositionAX(pos);
    setPositionAY(pos);
}

因此，您可以通过多种方式在组件内部调用它:

直接地:

setPositionFactory(setPositionAX, setPositionAY)(); // default: 200

或保留该功能以备后用:

const setPosition = setPositionFactory(setPositionAX, setPositionAY);

// ...

setPosition(220);

B. 将这些值作为 App 的 Prop 并更新组件内部的状态。它会更惯用。

C. 使用 Observable与 rxjs并订阅你的组件。

将 observables 添加到您的问题代码中将是:

import { positionObs } from './observables';

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

    positionObs.subscribe((pos) => {
        setPositionAX(pos);
        setPositionAY(pos);
    });
}

然后在 observables

import { Subject } from 'rxjs';

export const positionObs = new Subject();

export const setPosition = () => {
    positionObs.next(200);
};