Question

在状态发生变化后，我在使用react路由器重定向路由时遇到了问题。

事实上，当我使用更改状态的click事件（currentListId）时，我的路由正在工作，但是当我通过Id（listId）删除元素时它不起作用，所以setState（listSelected：＆＃34;＆＃34;）... 我的路线仍显示/ 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

当您将selectList组件传递给List时，您将覆盖该参数，因此如果您在子组件中调用this.props.selectList，则会使用{调用原始函数{1}}，无论你给出什么论据。

您只需将list._id函数向下传递而不绑定参数，然后只使用selectedList组件中的list._id调用它即可解决此问题：

List

在<List selectList = {this.props.selectList} ...组件

中

List

现在传递<ListGroupItem onClick={() => this.props.selectList(list._id)} ...函数的null应该正确传递。

Meteor / React，changeState之后的重定向路由

1 个答案: