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

这意味着onClick被分配了一个值而不是一个函数，因为它获取了this.props.setTarget(target.id)的返回值。

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

您需要绑定此功能，如

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

它将解决问题

使用redux

1 个答案: