为什么 onClick 会删除 react.js 中 redux 数组中的所有项？

Question

我正在开发一个反应应用程序，其中我实现了一个 onClick 按钮，但即使我尝试过滤和删除，该 onClick 按钮也会删除 redux 存储数组中的所有元素。这是我的代码：

reducerFunction

case Actions.DELETE_API_GRANT:{
      return{
        ...state,clientAccessGrants:[state.clientAccessGrants.filter(item=>action.grant.api!==item.api)]
      }
    }

My UI Component:

     deleteApiGrants(grant)
  {
    this.props.deleteApiGrants(grant)
  }
    {this.props.clientAccessGrants.map((grant, index) => (
              console.log(grant.api),
              <tr key={grant.api+grant.group}>
                <td>{grant.api}</td>
                
                <td>{grant.group}</td>
                
                <td>
                  <div>
                    <input type='button' value="delete" className='btn' onClick={()=>this.deleteApiGrants({api:grant.api,group:grant.group})}></input>
                    
                  </div>
                </td>
                </tr>

My array object structure is:

{
api:"something",
group:"something"
}

My map and dispatch function:

const mapDispatchToProps = (dispatch) => ({

  deleteApiGrants:(grant)=>dispatch(onDeleteApiGrant(grant))
});


 const mapStateToProps = (state) => ({

  clientAccessGrants:state.client.clientAccessGrants
});

My ActionCreator:

export function onDeleteApiGrant(grant)
{
  console.log(grant)
  return {type:Actions.DELETE_API_GRANT,grant}
}

任何帮助将不胜感激。

谢谢

Answer 1

您需要更正您的 reducerFunction：

case Actions.DELETE_API_GRANT:{
      return{
        // remove square brackets
        ...state,clientAccessGrants: state.clientAccessGrants.filter(item=>action.grant.api!==item.api)
      }
    }

推理

来自Array.prototype.filter() - JavaScript | MDN，

<块引用>

返回值

包含通过测试的元素的新数组。如果没有元素通过测试，则返回一个空数组。