我有一个使用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
传递给useState
的值只会设置一次作为其初始值,之后您将给它的参数将被忽略。如果您希望更新道具更改的文本,我建议使用useEffect
。它看起来像这样:
useEffect(() => {
setText(props.match.params.text || '')
}, [ props.match.params.text ]);
作为第一个参数传递给useEffect
的函数将根据您作为第二个参数传递的数组中的值是否更改来执行。因此,如果来自prop的文本发生更改,它将执行该函数并使用新值设置状态。