React | useState 来自另一个 useState，更改不会传播，我该如何重构它?

Question

有一个状态在一段时间后(获取内容后(发生变化，如果我想构造一个变量并从中构建一个新状态，当第一个状态改变时，它不会传播到第二个状态

我该如何解决这个问题？我不想将 2 个状态合并为一个，因为这会混合执行不同操作的组件

如果你有时间，可以看看下面的代码沙箱

https://codesandbox.io/s/purple-sun-mx428?fontsize=14&hidenavigation=1&theme=dark

我在这里粘贴代码

import React, { useEffect, useState } from "react";
import "./styles.css";
const wait = ms => new Promise((r, j) => setTimeout(r, ms));
const test2 = () => {
const [test, setTest] = useState("hi");
useEffect(() => {
const testf = async stillMounted => {
await wait(1000);
setTest("bye");
};
const stillMounted = { value: true };
testf(stillMounted);
return () => {
stillMounted.value = false;
};
}, []);
return test;
};
export default function App() {
const here = test2();
const stru = [{ id: "whatever", content: here }];
const [elements, setElements] = useState(stru);
console.log(stru);
console.log(elements);
return (
<div className="App">
<h1>stru: {stru[0].content}</h1>
<h2>elements: {elements[0].content}</h2>
</div>
);
}

Answer 1

您可以编写在here变量更改时运行的效果。将类似这样的内容添加到App组件。

useEffect(() => {
// This runs when 'here' changes and then updates your other state
setElements([{ id: "whatever", content: here }])
}, [here]) // This makes this effect dependent on the 'here' variable