Question

我有一个使用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中的代码。 https://stackblitz.com/edit/react-ts-c7pvsp

Answer 1

您传递给useState的值将仅被设置为初始值一次，之后，您为其赋予的参数将被忽略。如果您希望通过更改更改文字，我建议改用useEffect。看起来像这样：

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

作为第一个参数传递给useEffect的函数将执行，具体取决于您作为第二个参数传递的数组中的值是否改变。因此，如果prop中的文本发生更改，它将执行该函数并使用新值设置状态。

由RouteProps初始化后，useState不会设置状态

1 个答案: