Question

我有能力使用React / Redux在页面上关注/取消关注。而且我还不完全了解如何做到这一点。因此，当用户关注“ 某事”时，reduce会生成：

case FOLLOW_CITY: {
    return {
        ...state,
        followingCity: 
            [...state.followingCity,{
                id: shortid.generate(),
                cityAdded: action.city, 
                country: state.data.map(el => el.sys.country).toString(),
                name: state.data.map(el => el.name).toString(),
                followingStatus: true
            }]
    }
}

但是我不知道如何进行取消关注功能。它必须删除我从数组followingCity上面创建的对象。

在页面上，标题也必须更改：

{followingCity || followingCity.followingStatus === true // it doesnt' work
    ?   <div onClick={() => deleteCity()} className='add-button'> // how to create this?
            <span>followed</span>
            <i className="fa fa-check" aria-hidden="true"></i>
        </div>

    :   <div onClick={() => addCity(dailyData)} className='add-button'>
            <span>follow</span>
            <i className="fa fa-plus" aria-hidden="true"></i>
        </div>
}

Answer 1

您可以过滤数组并根据ID删除对象。

<div onClick={() => deleteCity(followingCity.id)} className='add-button'> // how to create this?
      <span>followed</span>
      <i className="fa fa-check" aria-hidden="true"></i>
</div>

您的deleteCity函数可以提供对象的ID，然后可以进行过滤：

CASE DELETE_CITY: {
  return {
    ...state,
    followingCity: state.followingCity.filter(a => a.id !== theId)
  }
}

如何从数组中删除对象？

1 个答案: