4
votes

Inverser un tableau avec des hooks React

En utilisant javascript, existe-t-il un moyen rapide d'échanger 2 éléments dans un tableau?

Donc, s'il s'agissait d'un booléen, vous pourriez faire

setTrueOrFalse(!trueOrFalse); // would equal [false, true]

<div onClick={() => setTrueOrFalse()} />Swap items in array</div>

mais disons que j'ai un array

// I want to swap the items in the array on a click 
const [trueOrFalse, setTrueOrFalse] = useState([true, false]);

et je veux les changer, y a-t-il un moyen rapide de permuter les éléments dans le tableau s'il y a deux éléments

const [isTrue, setIsTrue] = useState(false);

setIsTrue(!isTrue);

javascript reactjs ecmascript-6 react-hooks

5 commentaires

Je ne comprends pas votre question ... Veuillez clarifier

Essayez-vous d'inverser la valeur de chaque élément du tableau? Si tel est le cas, c'est simplement trueOfFalse.map (val =>! Val) . Ou essayez-vous de prendre l'élément à l'index 0 et de le déplacer vers l'index 1, et vice versa?

ai mis à jour ma question @messerbill est-ce plus clair maintenant?

@NicholasTower J'essaie de prendre l'élément à l'index 0 et de le déplacer vers l'index 1, et vice versa

Je pense que vous êtes censé utiliser useEffect , selon reactjs.org /docs/hooks-effect.html

5 Réponses :

3
votes

Essayez

let a=[true, false];

// inverse values
let b= a.map(x=>!x)

// swap sequence (inplace)
a.reverse();

console.log('inverse values', b);
console.log('swap sequence', a);

0 commentaires

1
votes

Vous pouvez utiliser ES6 affectation de déstructuration pour permuter facilement les variables dans une seule expression:

//Get inital array from useState and store in 2 variables
var [val1, val2] = useState();

//Check out the values
console.log(`Before swap values: val1 = ${val1}, val2 = ${val2}`);

//Do the swap using array desctructuring:
[val1, val2] = [val2, val1];

//Now see that the values have swapped
console.log(`After swap values: val1 = ${val1}, val2 = ${val2}`);

function useState() {
  return [true, false];
}

1 commentaires

Vous pouvez inverser le tableau, bien sûr, mais si vous avez toujours affaire à un tableau contenant 2 éléments, je pense que c'est plus simple.

3
votes

Vous pouvez simplement utiliser la déstructuration avec la méthode de rappel de setter useState

// I want to swap the items in the array on a click 
const [trueOrFalse, setTrueOrFalse] = useState([true, false]);

const swapState = () => {
    setTrueOrFalse(prevState => {
        const [val1, val2] = prevState;
        return [val2, val1];
    })
}

<div onClick={() => swapState()} />Swap items in array</div>

Démo de travail

0 commentaires

0
votes

Vous pouvez utiliser reverse a > méthode de tableau

function reverse(a){
  return a.reverse()
}

console.log(reverse([true, false]))

0 commentaires

0
votes

Vous pouvez essayer ceci

Array.prototype.swap = function(index1,index2){
	[this[index1], this[index2]] = [this[index2],this[index1]]
}
let arr = [1,2,3,4];
arr.swap(1,2);
console.log(arr);

0 commentaires