Reactjs 当由RouteProps初始化时，useState不设置状态

我有一个使用useState的组件。使用RouteComponentProps中的属性初始化状态。当我在浏览器地址栏中键入url时，它会工作，但当url被链接标记更改时，它不会工作。有什么区别？当链接标记更改url时，如何设置状态

使用下面的代码并导航到/test1将从第行显示test1/test1

{text}/{props.match.params.text}

按链接go将URL更改为/erik，但显示test1/erik。为什么?

interface RouteProps {
    text: string | undefined
}

const Test: React.FunctionComponent<RouteComponentProps<RouteProps>> = (props) => {
    const [text, setText] = useState(props.match.params.text || '');

    return (
    <div>
        <h3>{text}/{props.match.params.text}</h3>
        <Link to="/erik">Go</Link>
    </div>
    );
}

const routes = <div>
    <Route path='/:text?' component={ Test } />
</div>;

render(<BrowserRouter basename={process.env.PUBLIC_URL} children={ routes } />, document.getElementById('root'));

这是Stackblitz中的代码

您传递给useState的值将只设置一次作为其初始值，之后您提供给它的参数将被忽略。如果您希望更新道具更改的文本，我建议改用useEffect。它看起来是这样的：

useEffect(() => {
    setText(props.match.params.text || '')
}, [ props.match.params.text ]);

作为第一个参数传递给useEffect的函数将根据作为第二个参数传递的数组中的值是否更改而执行。因此，如果道具中的文本发生变化，它将执行该函数并用新值设置状态。

传递给useState的值将只设置一次作为初始值，之后您提供给它的参数将被忽略。如果您希望更新道具更改的文本，我建议改用useEffect。它看起来是这样的：

useEffect(() => {
    setText(props.match.params.text || '')
}, [ props.match.params.text ]);

---

作为第一个参数传递给useEffect的函数将根据作为第二个参数传递的数组中的值是否更改而执行。因此，如果道具中的文本发生变化，它将执行函数并用新值设置状态。

我今天读到了类似的内容。更改状态时请检查此组件更新，很抱歉没有提供答案。我是新手，无法自己做出反应。您真的需要状态吗？我今天读了一些类似的内容。更改状态时检查此组件更新，很抱歉没有提供答案，我是新的，无法自己做出反应。您真的需要状态吗？