useState 在被 RouteProps 初始化时不设置状态

Question

我有一个使用 useState 的组件。使用来自 RouteComponentProps 的属性初始化状态。当我在浏览器地址栏中键入 url 时它起作用，但当 URL 被 Link 标签更改时不起作用。有什么不同？当 url 被 Link 标签更改时，如何设置状态？

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

中的 test1/test1

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

按 link "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 中的代码。 https://stackblitz.com/edit/react-ts-c7pvsp

Answer 1

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

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

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

useState 在被 RouteProps 初始化时不设置状态

useState does not set state when initalized by RouteProps

typescript

reactjs

react-router

react-hooks