组件中的混合状态与redux

Question

我有一个组件，它从我的应用程序状态中获取一个列表，并且我想根据组件中文本字段的输入过滤该列表。当用户过滤列表时，他们可以从列表中选择一个项目并更新状态。

在我看来，将过滤器作为应用程序状态的一部分并不重要，因为只有该组件需要使用过滤器。

我Redux的状态是

onst mapStateToProps = (state) => { 
    return { 
     tracks: Object.keys(state.activities).map(a => { 
      return { 
       id: state.activities[a].id, 
       user: state.activities[a].user, 
       color: state.activities[a].color 
      }}) 
    }; 
} 

const mapDispatchToProps = (dispatch) => { 
    return { 
     setTarget: (targetId) => { 
      dispatch(setTargetPointsById(targetId)) 
     } 
    } 
}; 

const TrackSelectorControl = connect(mapStateToProps, mapDispatchToProps)(TrackSelector); 

export default TrackSelectorControl; 

，然后在我的部分，我有

lass TrackSelector extends Component { 
    componentWillMount() { 
    this.setState({filter: false}) 
    } 
    componentWillReceiveProps(props, state) { 

    } 
    componentDidUpdate(props, state) { 
    } 
    shouldComponentUpdate() { 
    return false; 
    } 
    filter() { 
     if (!this.state.filter) return this.props.tracks 
     return this.props.tracks.filter(t => { 
     return t.user.name.includes(this.state.filter) 
     }) 
    } 
    render() { 
    return <ul className={style.list}> 
      <input type="text" placeholder="Filter" onChange={(evt) => { 
       this.setState({filter: evt.target.value}); 

      }} /> 
      {this.filter().map(track => { 
      return <li key={track.id} onclick={this.props.setTarget(track.id)} className={style.track}> 
         <img style={{borderColor: createColor(track.color) }} src={track.user.avatar} className={style.img} /> 
         <span>{track.user.name} </span> 
        </li> 
      })} 
     </ul> 
    } 
} 

export default TrackSelector; 

我得到的是warning setState({...}) cannot update...

Answer 1

，因为当你写

您收到此错误的错误

<li key={track.id} onclick={this.props.setTarget(track.id)} className={style.track}> 

您呼叫的setTarget功能onClick但因为你是喜欢

onclick={this.props.setTarget(track.id)} 

调用它，它意味着，因为它需要的this.props.setTarget(target.id)返回值onClick分配一个值，而不是一个功能。

因此，每次你的component renders这个函数将被自动调用，没有事件获取的值，因为你正在设置一个状态在该函数中，你会得到一个警告。

你需要像

onclick={this.props.setTarget.bind(this, track.id)} 

此功能绑定，它会解决这个问题