Meteor/React，changeState 后重定向路由

Question

在状态更改后，我在使用 react 路由器重定向我的路由时遇到问题。

事实上，当我使用改变状态（currentListId）的点击事件时，我的路由是有效的，但是当我通过Id（listId）删除一个元素时它不起作用，所以在setState（listSelected：“” ) ... 我的路线仍然显示 /idlistselected 而不是重定向到 /。

这里有一些代码：

页面代码：

constructor(props) {
    super(props);
    this.state = { listSelected: "" };
    this.selectList = this.selectList.bind(this);
}

selectList(listId) {
    this.setState({ listSelected: listId });

    // Here, only the if listId Works
    if (listId)
        browserHistory.push('/admin/todos/' + listId);
    else
        browserHistory.push('/admin/todos/');
}

render() {
    return (
            <ListPanel
                listSelected = {this.state.listSelected} 
                selectList = {this.selectList} 
                lists = {this.props.lists} 
                tasks = {this.props.tasks}
            />

然后是 ListPanel：

renderLists() {
    return this.props.lists.map((list) => (
        <List 
            selectedItemId ={this.props.listSelected}
            selectList = {() => this.props.selectList(list._id)}
            key = {list._id}
            list = {list}
            countPendingTasks = {this.countPendingTasks(list._id)}
        />
    ));
}

最后是列表：

deleteThisList() {
    Meteor.call('lists.remove', this.props.list._id, (err) => {
        if (!err) {
            this.props.selectList(null);
        }   
    });
}

render() {
    return (
        <ListGroupItem 
            className={(this.props.list._id == this.props.selectedItemId) ? 'active' : ''} 
            onClick={this.props.selectList}
        >
            {this.props.list.name}

            <Glyphicon className="pushRight red"onClick={() => this.deleteThisList()}/>
        </ListGroupItem>
    );
}

如果我在selectList中显示listId，当我删除一个列表时我有过去的ID..我找不到原因，因为我在删除函数中将它设置为null...

感谢您的帮助。

Answer 1

当您将参数传递给List 组件时，您将覆盖selectList 的参数，因此如果您在子组件中调用this.props.selectList，则无论如何都会使用list._id 调用原始函数你给它的论据。

您可以简单地通过在不绑定参数的情况下传递 selectedList 函数，然后在 List 组件中使用 list._id 调用它来解决此问题：

<List 
  selectList = {this.props.selectList}
  ...

在List 组件中

<ListGroupItem 
  onClick={() => this.props.selectList(list._id)}
  ...

现在deleteThisList 函数中传递的null 应该可以正确传递了。