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}
            />

然后列表面板：

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 应该可以正确传递。

Meteor/React, changeState 后重定向路由

Meteor/React, redirect route after changeState

javascript

state

meteor

reactjs

react-router