[英]React JS Removing specific item from list
I have managed to create a list of friends and the addFriends function works correctly ie a new person is added called 'New Friend' every time the button is pressed. 我已经成功创建了一个朋友列表,并且addFriends函数可以正常工作,即每次按下按钮时,都会添加一个名为“新朋友”的新人。
The removeFriend function also works but if I add a few friends then press Remove Friend it removes every item after the key rather than just the key itself. removeFriend函数也可以使用,但是如果我添加几个朋友,然后按Remove Friend,它将删除键之后的所有项目,而不仅仅是键本身。 I want the code below to just remove key 2 (George Brown) rather than all records after it.
我希望下面的代码仅删除键2(乔治·布朗),而不是其后的所有记录。
friendsActions.js friendsActions.js
import * as f from '../constants'
export const addFriend = ({ firstname, lastname }) => ({
type: f.ADD_FRIEND,
frienditem: {
firstname,
lastname,
},
})
export const removeFriend = ({ key }) => ({
type: f.REMOVE_FRIEND,
key,
})
friendsReducer.js friendsReducer.js
import * as f from '../constants'
const initialState = [
{ firstname: 'John', lastname: 'Smith' },
{ firstname: 'James', lastname: 'Johnson' },
{ firstname: 'George', lastname: 'Brown' },
]
const friendsReducer = (state = initialState, action) => {
switch (action.type) {
case f.ADD_FRIEND:
return [...state, action.frienditem]
case f.REMOVE_FRIEND:
console.log('removing friend with key ' + action.key)
return [...state.slice(0, action.key), ...state.slice(action.key + 1)]
default:
return state
}
}
export default friendsReducer
index.js (constants) index.js(常量)
export const ADD_FRIEND = 'ADD_FRIEND'
export const REMOVE_FRIEND = 'REMOVE_FRIEND'
friendsContainer.js friendsContainer.js
import React from 'react'
import Page from '../components/Page'
import FriendList from '../containers/FriendList'
import { css } from 'glamor'
const FriendContainer = props => (
<Page title="Friends List" colour="blue">
<FriendList {...props} />
</Page>
)
export default FriendContainer
friendsList.js friendsList.js
import React from 'react'
import { css } from 'glamor'
const Friend = ({ firstname, lastname }) => (
<div>
<ul>
<li>
{firstname} {lastname}
</li>
</ul>
</div>
)
const FriendList = ({ friends, addFriend, removeFriend }) => (
<div>
<div>
{friends.map((frn, i) => (
<Friend key={++i} firstname={frn.firstname} lastname={frn.lastname} />
))}
</div>
<button onClick={() => addFriend({ firstname: 'New', lastname: 'Friend' })}>
Add Friend
</button>
<button onClick={() => removeFriend({ key: '2' })}>Remove Friend</button>
</div>
)
export default FriendList
You are passing in a string as the key for the action: 您正在传递一个字符串作为操作的键:
{
key: '3'
}
Then in your code, you add 1 to it, which is '31' in this case. 然后在您的代码中向其添加1,在这种情况下为'31'。
Change state.slice(action.key + 1)
to state.slice(parseInt(action.key, 10) + 1)
or change your keys to be numbers from the get-go. 将
state.slice(action.key + 1)
更改为state.slice(parseInt(action.key, 10) + 1)
或将密钥更改为一开始的数字。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.