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

Question

我正在尝试从另一个函数更新状态的值。

我是这样声明的：

const App () => {

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

}

除了App我还有另一个功能：

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

}

当我打电话时，setPosition()我收到错误：

找不到变量：setPositionAX

找不到变量：setPositionAY

我试图移到const [positionAX, setPositionAX] = useState(100)文件的顶部，但随后出现错误：

无效的钩子调用。钩子只能在函数体内调用。

如何从其他函数更新该变量？

为@tj-crowder 编辑 1

我似乎无法让它工作，我不确定我做错了什么

这是您给我的代码的现场小吃示例：https : //snack.expo.io/Cd!hwDQ0m

如果我添加警报：

alert("pressed")

进入 handleClick 函数，它起作用了，所以出于某种原因，它只是不能与setPositionA([200, 200]).

另外作为附加说明： 在我的应用程序示例中，有两个功能和设置状态的功能，以及显示状态的功能是分开的，这就是为什么我遇到了我打算在初始堆栈溢出帖子中提出的问题.

这是我试图实现的那个例子的小吃：

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

我使用“positionX”和“positionY”作为变量来定义渲染出的元素的顶部和左侧位置，但是，变量positionX和positionY变量的实际设置是在另一个函数中完成的

我是一名初级开发人员，所以我真的很想感谢你在这方面的所有帮助，如果这是超级菜鸟，我也很抱歉。

编辑 2：穆罕默德·努曼

我试过你的方法，但我似乎无法让它工作。我认为对于我想要实现的目标以及我想要实现的目标存在一些困惑。这可能是我的错，因为我是一个 noobie 开发人员，所以请原谅我。我不想只是发布我所有的代码，因为我认为人们不喜欢仅仅转储代码并像“修复这个”一样 - 但是，对于这种情况，它可能是最好的哈哈。

这是我的代码的完整小吃：https : //snack.expo.io/uk8yb5xys

我想要的是这个：

指示用户从单词“start”到单词“end”画一条线。如果绘制了线条并且用户线的起点和终点与给定的路径匹配，则向他们展示另一条要绘制的线，并且“起点”和“终点”的位置将移动，以便用户知道要绘制的位置。

有一个注释行：

// 这里是我需要更新开始和结束值的地方

这就是我需要“开始”一词和“结束”一词才能移动到新位置的地方。

目前，当您绘制一条完整的线并将手指从屏幕上移开时 - 没有任何反应。但是，当您将手指放下时，起点和终点会移动。当用户抬起手指时，我需要它们移动。

我很感激你在这方面的时间，所以谢谢你。

Answer 1

三个选项：

A. 将这些函数作为参数发送并使用柯里化函数：

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

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

直接地：

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

或保留该功能以备后用：

const setPosition = setPositionFactory(setPositionAX, setPositionAY);

// ...

setPosition(220);

B. 获取这些值作为 propsApp并更新组件内部的状态。会更地道。

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