Question

我正在使用react，redux和react-router创建一个小应用程序。

我有<Link />中包含的项目列表，当我点击其中一项时，我希望在触发链接操作之前将项目设置为状态中的currentItem。有一个动作要做 - selectItem(item) - 但我不知道如何触发它。

我应该在componentWillUnmount上触发吗？在这种情况下 - 我如何找出点击了哪个项目？我应该创建一个调度操作的<Link onClick={}/>处理程序吗？

项目页面将检查currentItem是否已设置，如果没有，则可能从后端获取。

Answer 1

我发现使用Link效果很好。

您可以通过访问事件和原始组件的值的方式使用它。像这样：

event.target.value

其中handlerFunction是redux动作创建者。然后在handlerFunciton中，您可以访问事件和元素的值，如下所示：export function handlerFunction(event) { return { type: 'CHANGE_SOMETHING', prop: event.target.value } }。您的动作创建者应该看起来像这样：

<Link to={address} onClick={() => actions.handlerFunction(someData)}>

然后您可以在减速器中设置状态。

如果您不需要该活动，但想要将一些数据传递给动作创建者，您可以像这样使用它：

to

将<select name="ctl00$ctl00$ContentPlaceHolder1$cphContentLeft$ddlCabinType" id="ctl00_ctl00_ContentPlaceHolder1_cphContentLeft_ddlCabinType" class="ddlWidth form-control" onchange="BookOnline.onCabinTypeChange();" style="margin-top: 4px;"> <option value="0"> Please Select </option> <option value="Inside">Inside</option> <option selected="selected" value="Outside">Outside</option> <option value="Balcony">Balcony</option> <option value="Suite">Suite</option> </select>属性添加到链接非常重要，它将更新您在地址栏中看到的地址。

See more in the Link docs on github.

Answer 2

您也可以使用＆＃34; root＆＃34;中的componentWillReceiveProps来执行此操作。组件，并将nextProps与this.props进行比较。路由器将道具传递给组件（位置，历史记录等），您可以使用它们。

例如：

ReactDOM.render(
    <Router>
        <Route path="/" component={App}/>
    </Router>,
    document.getElementById('root')
);

并在 App 组件中

componentWillReceiveProps(nextProps) {
if (nextProps.location.pathname != this.props.location.pathname) {
// do stuff
}

P.S。我仍然是反应菜鸟，所以如果您对此方法有任何建议或意见，请发表评论。

Answer 3

使用上次React更新中的新useEffect和useRef帮助器，您可以这样做：

import React, { useEffect, useRef } from 'react';
import { withRouter, RouteComponentProps } from 'react-router';

function Bob({ location: { key } }: RouteComponentProps) {
  const oldURL = useRef(key); // key is a unique identifier set by react-router

  useEffect(() => {
    if (oldURL.current !== key) {
      // trigger your action here
    }
    oldURL.current = key; // refresh the oldURL after every render
  });
}

export default withRouter(Bob);

useRef可以将旧值保留在内存中。

然后，将旧的location.key与新的location.pathname进行比较。

如果您比较htpp://foo.bar/products?filterBy=price ^ ^ ^ domain name | pathname | search params，将不会检测到搜索参数中的更改，因为路径名仅采用域名和搜索参数之间的文本：

location.key

通过比较filterBy，即使location.pathname发生变化，您的操作也会被触发。
不能与configureStore()一起使用。

使用react-router

3 个答案: