javascript - How to map an array after making changes to it in react js? - Stack Overflow

admin管理员组

文章数量:1431955

I'm mapping an array and each has a button to delete it from the array :

const ments = [ 'Hey', 'Yo' ];

            {ments.map((each, index) => {
                return (
                    <div key={index}>
                        <button
                            onClick={() => {
                                console.log(ments.indexOf(each));
                                const id = ments.indexOf(each);
                                ments.splice(id, 1);
                                console.log(ments);
                            }}
                        >
                            Button
                        </button>
                    </div>);
            }

When the button is clicked the item will be deleted and It console logs the array after deleting it and it works fine .

1
App.js:17 ["Hey"]
App.js:14 0
App.js:17 []

The only problem is the array which is displayed on the screen doesn't update in other words array displayed on the screen doesn't change after clicking the button and it still shows the whole array which has all the items .

How can I map through the changed version of the array or what am I doing wrong with mapping an array that doesn't display the changed version of it ?

I'm mapping an array and each has a button to delete it from the array :

const ments = [ 'Hey', 'Yo' ];

            {ments.map((each, index) => {
                return (
                    <div key={index}>
                        <button
                            onClick={() => {
                                console.log(ments.indexOf(each));
                                const id = ments.indexOf(each);
                                ments.splice(id, 1);
                                console.log(ments);
                            }}
                        >
                            Button
                        </button>
                    </div>);
            }

When the button is clicked the item will be deleted and It console logs the array after deleting it and it works fine .

1
App.js:17 ["Hey"]
App.js:14 0
App.js:17 []

The only problem is the array which is displayed on the screen doesn't update in other words array displayed on the screen doesn't change after clicking the button and it still shows the whole array which has all the items .

How can I map through the changed version of the array or what am I doing wrong with mapping an array that doesn't display the changed version of it ?

• javascript
• arrays
• reactjs

Share Improve this question Follow asked Jul 21, 2020 at 12:17 Mehdi FarajiMehdi Faraji 3,9141010 gold badges4646 silver badges9696 bronze badges

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 4

You must have to use useState.

import React, { useState } from 'react';

const [ments, setComments ] = useState([ 'Hey', 'Yo' ]);

and inside your onClick function:

setComments(ments.filter((ment, index)=>index!==id));

I used .filter because your use of splice will return the cutted element of the array.

Assign the updated array to the real array like this. and change the type of ments to var. const cant be updated.

ments = ments.splice(id, 1);

If you want to rerender after deletion, you can use state variables and setState on deletion.

In the constructor of ponent initialize the ments variable

constructor(props) {
    super(props);
    this.state = {ments: ['A', 'B']};
  }

Then on click of delete button update the state

this.setState({
      ments: ments.splice(id, 1);
    });

If you are using React Hooks in your project may simply use the useState() then you could simply set the values.

You are missing the point in how React internally works. React will rerender the ponent based on props or state change.

You are not using the React state here, which would then cause the ponent to render again with new value of the state.

Simply put ments in state like this const [ments, setComments] = useState([ 'Hey', 'Yo' ])

and then assign new value of ments in your callback with setComments

本文标签： javascriptHow to map an array after making changes to it in react jsStack Overflow