score:2
i'm seeing a couple of things here that you should take a look at, and hopefully they'll help you to solve your issue.
first of all, note that your deletepost
function expects a parameter with the post id. however, in the jsx code you posted for your button, you're not passing any value to the function at all. this means that the property payload
will have an undefined
value by the time the action is dispatched.
make sure you update your view to pass it an id, so you call the proper endpoint (your delete
request is probably pointing to https://jsonplaceholder.typicode.com/posts/undefined
right now) and the reducer actually receives the id of the post you want to remove:
<button key={post.id} onclick={()=>this.props.deletepost(post.id)}>x</button>
the second thing you have to check is the implementation of your reducer. from what i've understood in your message and the code for the deletepost
method, action.payload
should contain a number.
that being the case, how your reducer is handling the delete_post
action in the reducer doesn't make too much sense to me.
case delete_post:
return {
...state,
items: action.payload
};
reducers are supposed to be pure functions that, for a given state and action, returns an entirely new state based on the action it receives. remember too that the state you receive cannot be altered at all: if the original instance is mutated in any way, your code will not work.
in this case, you need to return a new state where your items
property is replaced by a new list where the id you want to remove is missing. in the piece of code you wrote, however, you're replacing the items
array by a number. this is not what was supposed to happen, starting by the fact that items
should still be an array of numbers.
what you actually need to do is to create a new array that does not include the item you wanted to remove. you may use the filter
method to achieve this:
case delete_post:
return {
...state,
items: state.items.filter(item => item !== action.payload)
};
this code should do exactly what you want: here we are assigning the items
property in your state an entirely new array where the deleted post is not included.
filter
returns an array with the items for which the specified function returns true
. in this case, the arrow function we're passing to filter
returns true
for every item that's different from the id of the post you want to remove.
by using this method you will also have no problems with the initial state.items
value being mutated somehow, as filter
returns a new instance of array
and does not alter the original.
Source: stackoverflow.com
Related Query
- Deleting post with React Redux api delete request
- Deleting with React Redux api delete request
- React with Redux Axios get request error issue with laravel 5.2 api server
- How to use a custom React hook to make a POST or DELETE request with Axios
- how to convert an array to a array of objects with additional information in react using map when doing a POST api request
- How to test API request failures with Redux Saga?
- Paginate date-specific results from an API with React and Redux
- Post an object with fetch using react js and express API server
- React Redux Axios: POST Request not receiving credentials from redux state
- WordPress custom API endpoint POST request fails in React
- Delete request with axios - React
- In react with redux, how to do post request
- How to do a REST API post request with FileUpload to an Azure AD Protected REST API
- React and Redux: 401 Unauthorized Error POST API Request
- How to make a POST request with json content type with Semantic UI API
- HTTP POST request with JSON payload from react app returns net::ERR_SSL_PROTOCOL_ERROR(chrome)
- POST a form to an API with React
- wp-json API returns 401 on post edit with React and nonce
- Post Method with React and redux
- React hook form with redux and async request
- React and Express iTunes Search API :: Error: Request failed with status code 404
- Can't access params sent in POST request from React client to Rails api
- Can't display result of API request with React
- How to POST request using axios with React Hooks?
- axios post request error with 422 (Unprocessable Entity) from react
- issue with sending headers in post request to the API
- re-render component after post request api react
- React Redux one-page app: handle an API 404 with full page render
- Share API data with other components by using React Hook, NO REDUX
- Post request in React with multiple parameters
More Query from same tag
- What does this mean? Warning: findDOMNode is deprecated in StrictMode
- Add Avatar (user profile photo) to Semantic UI React's Dropdown
- React functional component setState not updating the state
- Memoize functional component using react-redux, reselect and React.memo()
- How to maintain css transitions in react table on data change
- Run Asp.net MVC and React on same domain
- Is there a way to make a dynamic text area in react
- How do I display images saved in MongoDB through Express.js through React?
- Next.js 9+ FOUC (Flash or Unstyled Content) with Styled Components
- Is initialState in a mixin merged with initialState in a component?
- Scroll to a component when a button is clicked in React JSX
- Display Array Data in reactjs
- Material UI, make Cards appear in a row, instead of 1 column
- React - useState Hook with Context Api - can't copy a state array to another state array
- Launch keyboard event from React ref
- Adding react to existing web page (legacy) - imports not working
- Where to Put Code that should run First ReactJs + Mobx State Tree
- How to add a google-recaptcha v3 to a functional react component with a form?
- TypeError: render is not a function updateContextConsumer
- React, ES6+7 ajax call not working?
- Make Antd 3.x Popover component accessible via keyboard's tab key
- Default select tab React.js
- Set form element initial value which is received via props
- SPFx Play HTML5 Video dynamically on a webpart
- React/Webpack: How to transform relative resource URLs if production build runs under alias path?
- React - ReactHtmlParser returns an [object Object]
- React.js -- How to pass properties object to child component?
- React-bootstrap navbar collapse issue
- React Redux : use Selector is called before dispatch
- How is Facebook able to show a custom modal window for unsaved changes in their application?