ajouter les données à chaque fois que la fonction est appelée dans un tableau d'objets d'état.

Question

J'ai cette fonction handleCheckClick qui obtient Data Je veux stocker les données dans un état à chaque fois que la fonction handleCheckClick est appelée. Ainsi, après de nombreuses fois où handleCheckClick est appelé, l'état doit ressembler au tableau d'objets ci-dessous.

handleCheckClick = (e, stateVal, index) => {

    let prevState = [...this.state[stateVal]];
    prevState[index].positive = e.target.checked;
    console.log(index);
    this.setState({ [stateVal]: prevState });
    var date = moment(this.state.dateState).format("YYYY-MM-DD");
    const { id, checked } = e.target.dataset;
    console.log(stateVal);
    if (e.target.checked) {
      var checkbox = "True";
    } else {
      var checkbox = "False";
    }

    const Data = {
      boolvalue: checkbox,
      date: date,
      userid: id,
    };

 this.setState({ datastate : Data  });// something like this

  };

après plusieurs appels de la fonction handleCheckClick, l'état doit ressembler à ceci

[
    {
        "date" : "2022-02-15",
        "userid" : 6,
        "boolvalue" : true
    },
    {
        "date" : "2022-02-15",
        "userid" : 5,
        "boolvalue" : false
    },
    {
        "date" : "2022-02-15",
        "userid" :7,
        "boolvalue" : true
    },
    {
        "date" : "2022-02-15",
        "userid" : 11,
        "boolvalue" : true
    },
    {
        "date" : "2022-02-15",
        "id" : 4,
        "boolvalue" : false
    }
]

veuillez créer un exemple de codesandbox

https://codesandbox.io/s/recursing-wind-mjfjh4?file=/src/App.js

Answer 1

Vous devez prendre vos données et appeler setState en utilisant les données existantes fusionnées avec les nouvelles Data objet. La fusion peut être effectuée en utilisant ... (spread) opérateur. Voici le code avec les parties pertinentes :

class Component extends React.Component {

    handleClick = (e) => {
        // build up a new data object:
        if (e.target.checked) {
            var checkbox = "True";
        } else {
            var checkbox = "False";
        }

        const { id } = e.target.dataset
        var date = moment(this.state.dateState).format("YYYY-MM-DD");

        const Data = {
            boolvalue: checkbox,
            date: date,
            userid: id,
        };

        // set the new state, merging the Data with previous state (accesible via this.state)
        // this creates a new array with all the objects from this.state.datastate and the new Dataobject
        this.setState({
            datastate: [...this.state.datastate, Data]
        })

    }

    // log the state on each update for seeing changes.
    componentDidUpdate() {
        console.log('Component did update. State:', this.state)
    }

    // Rendering only a button for showcasing the logic.
    render() {
        return <button onClick={this.handleClick}></button>
    }

    constructor(props) {
        super(props)
        // initialise an empty state
        this.state = {
            datastate: [],
            dateState: new Date()
        }
    }

}

Edition pour supprimer un élément lorsqu'il n'est pas coché :

Vous pouvez supprimer un certain élément par son id dans la section onClick lorsque la case n'est pas cochée :

class Component extends React.Component {

    handleClick = (e) => {

        // get id first.
        const { id } = e.target.dataset

        // if element is not checked anymore remove its corresponding data:
        if(e.target.checked === false) {
            // remove the element by filtering. Accept everything with a different id!
            const update = this.state.datastate.filter(d => d.userid !== id)
            this.setState({
                datastate: update
            })

            // end handler here..
            return

        }

        // if we get here, it means checkbox is checked now, so add data!
        var date = moment(this.state.dateState).format("YYYY-MM-DD");

        const Data = {
            // it is better to keep the boolean value for later use..
            boolvalue: e.target.checked,
            date: date,
            userid: id,
        };

        // set the new state, merging the Data with previous state (accesible via this.state)
        // this creates a new array with all the objects from this.state.datastate and the new Dataobject
        this.setState({
            datastate: [...this.state.datastate, Data]
        })

    }

    // log the state on each update for seeing changes.
    componentDidUpdate() {
        console.log('Component did update. State:', this.state)
    }

    // Rendering only a button for showcasing the logic.
    render() {
        return <button onClick={this.handleClick}></button>
    }

    constructor(props) {
        super(props)
        // initialise an empty state
        this.state = {
            datastate: [],
            dateState: new Date()
        }
    }

}

N'hésitez pas à laisser un commentaire