当RouteProps初始化时,setState不会设置状态

问题描述 投票:1回答:1

我有一个使用useState的组件。使用RouteComponentProps中的属性初始化状态。当我在浏览器地址栏中键入url时,它可以正常工作,但是当链接标记更改URL时则不行。有什么不同?如何通过Link-tag更改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

reactjs typescript react-router react-hooks
1个回答
4
投票

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

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

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

© www.soinside.com 2019 - 2024. All rights reserved.