Reactjs 用React钩子防止错误状态

我有一个组件

import React，{useState，useffect}来自“React”；
从“react router dom”导入{useParams}；
常数数据={
“1”：[“1a”、“1b”]，
“2”：[“2a”]
};
常量段塞={
“1a”：{案文：“Lorem”}，
“1b”：{案文：“ipsum”}，
“2a”：{案文：“…”}
};
常量示例页面：React.FC=（）=>{
const{id}=useParams（）；
const[index，setIndex]=useState（0）；
useffect（（）=>{
setIndex（0）；
}，[id]）；
console.log（“state”{
身份证件
指数
});
常量slug=data[id][index]；
常量text=slug[slug].text；
函数onPrev（）：void{
如果（指数-1）；
}
函数onNext（）：void{
如果（索引>=数据[id]。长度-1）{
返回；
}
setIndex（（index）=>index+1）；
}
返回(
上
{text}
下一个
);
};
导出默认示例页面；

这条路线是：

实时版本：

以下情况下，此代码存在错误：

用户位于

/1

url上

用户单击“下一步”按钮

用户单击链接到

/2

url

在这种情况下，

id

将是

“2”

，

索引将是
1
，但没有
数据[“2”][1]

正如您所看到的，
useffect
在这种情况下没有帮助，因为
useffect
不停止当前函数调用

我的问题是：如何确保此状态始终正确？

我知道我可以写
consttext=slug[slug]？.text，这解决了我的错误，但在一瞬间，组件的状态仍然不正确。我想知道是否有一种方法可以防止这种不正确的状态

在React类组件中，这个问题可以通过
getDerivedStateFromProps
来解决-你可以在上看到这个问题，
useEffect
将异步运行，因此你在索引更新之前尝试设置
slug
和
text

您可以将
slug
和
text
置于状态，然后在
索引
或
id
更改时使用另一个
useffect
来更新它们：

const { id } = useParams();
const [index, setIndex] = useState(0);
const [slug, setSlug] = useState();
const [text, setText] = useState();

useEffect(() => {
  setIndex(0);
}, [id]);

useEffect(() => {
  const newSlug = data[id][index];
  if (!newSlug) return; // If id changes but index has not updated yet

  setSlug(newSlug);
  setText(slugs[newSlug].text);
}, [id, index]);

useffect
将异步运行，因此您试图在索引更新之前设置
slug
和
text

您可以将
slug
和
text
置于状态，然后在
索引
或
id
更改时使用另一个
useffect
来更新它们：

const { id } = useParams();
const [index, setIndex] = useState(0);
const [slug, setSlug] = useState();
const [text, setText] = useState();

useEffect(() => {
  setIndex(0);
}, [id]);

useEffect(() => {
  const newSlug = data[id][index];
  if (!newSlug) return; // If id changes but index has not updated yet

  setSlug(newSlug);
  setText(slugs[newSlug].text);
}, [id, index]);

这很有效。但这段代码的问题是，您现在可以生成不一致的数据。“Slug”应始终是“id”和“index”值的结果。这打破了“单一真理来源”的原则。但这段代码的问题是，您现在可以生成不一致的数据。“Slug”应始终是“id”和“index”值的结果。这打破了“单一真理来源”的原则