在三元运算符 *React* 中更改两块 state

Question

Is it suitable to change two pieces of state in a ternary operator or is this something that is best to do using an if-else statement?

Everything I try seems to run into issues.

Examples of what I have tried are shown below.

x === y ? () => {setRating(10); setRank(1)} : console.log("Not found")

x === y ? setRating(10); setRank(1) : console.log("Not found")

What is the difference between this and the following if-else statement?

if (x === y) {
    setRating(10);
    setRank(1);
} else {
    console.log("Not found")
}

Answer 1

Separate the expressions with the comma operator, and wrap them with parenthesesL

 const fn = x => x? (console.log('true'), console.log('again')): console.log('false') fn(true)

However, you should prefer an if/else statement for readability purposes:

 const fn = x => { if(x) { console.log('true'); console.log('again'); } else { console.log('false'); } } fn(true)

Answer 2

Try something like,

const setData = (index,average)=>{
 setRating(average);
 setRank(index) 
}

and change your ternary operator as

place.name.toUpperCase() === doc.data().place ?setData(index,doc.data().average):console.log("Not found")

Answer 3

You can wrap the call in self executing arrow function but it's not something I would recommend doing as it isn't a good practice.

Creating a third function that calls the two function is the recommended way of doing it.

place.name.toUpperCase() === doc.data().place ? (() => 
    setRating(doc.data().average);
    setRank(index))() 
    : console.log("Not found")

Answer 4

You can go with the answer of Ori Dori, However another approach could be separating the two functions in truth block to another function like this:

place.name.toUpperCase() === doc.data().place ?
    onFound() : console.log("Not found");


function onFound() {
    setRating(doc.data().average);
    setRank(index) 
}