javascript react warunek błąd

Question

Witam

Mam taki warunek

 !newCountDown[0] ? (newCountDown = props.items.todos) : (console.log('aaa'));

jeżeli nie ma w drugiej częśći console.log() tylko null to wychodzi błąd, można to zapisać przy pomocy zwykłągo if ale ten sposób bardziej mi się podoba

da się coś z tym zrobić?

proszę o pomoc

Comments

Jaki konkretnie błąd? Pokaż szerszy kontekst tego kodu.

---

Failed to compile

./src/components/CountDown.js
  Line 8:5:  Expected an assignment or function call and instead saw an expression  no-unused-expressions

Search for the keywords to learn more about each error.

This error occurred during the build time and cannot be dismissed.

---

To wygląda na komunikat lintera. Pokaż proszę więcej kodu - gdzie używasz powyższego ternary expression? Czy to jest po prostu "luźna" linijka kodu? Jeśli tak, to lepiej faktycznie zastosować if..else, a jeśli koniecznie chcesz ternarką, to spróbuj:

!newCountDown[0] ? (newCountDown = props.items.todos) : (console.log('aaa') || null);

// albo
!newCountDown[0] ? (newCountDown = props.items.todos) : void console.log('aaa'); // <- wywołanie console.log zwraca undefined, więc z void-em wyjdzie na to samo, ale może linter się nie przyczepi

ale to już jest brzydki kod i niewykluczone, że linter nadal będzie się czepiać.

---

to jest cały komponent, dalej jest to powtórzone...

import React, { useState, useEffect } from 'react'
import { connect } from 'react-redux'

function CountDown(props) {


    let newCountDown = props.items.todos.filter(each => { return each.id === props.alarmId })
    !newCountDown[0] ? (newCountDown = props.items.todos) : (console.log('aaa'));

    const [countDownDate, setCountDownDate] = useState(newCountDown[0].date)
    const alarmTime = props.items.todos.filter(each => { return each.alarm.setAlarm != null })
    useEffect(() => {
        const int = setInterval(function () {
            const now = new Date().getTime();
            const distance = countDownDate - now;
            const days = Math.floor(distance / (1000 * 60 * 60 * 24));
            const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
            const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
            const seconds = Math.floor((distance % (1000 * 60)) / 1000);
            console.log(days + "d " + hours + "h "
                + minutes + "m " + seconds + "s ")
            const dayHourMinSec = days + "d " + hours + "h "
                + minutes + "m " + seconds + "s "
            props.countDown(props.alarmId, dayHourMinSec)

            alarmTime[0] ? (alarmTime[0].alarm.setAlarm - now < 0 ? (props.alarmOn(newCountDown[0].id, 'kkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkk')) : (console.log())) : (console.log())

            if (distance < 0 && newCountDown[0].date - new Date() <= 1500 && newCountDown[0].date - new Date() >= -1500) {
                // props.alarmOn(newCountDown[0].id)
                setTimeout(function () { props.alarmOff(newCountDown[0].id) }, 10000);
                clearInterval(int);
            }
            const offAlarm = props.items.todos.filter(each => { return each.id === newCountDown[0].id })

            if (newCountDown[0].alarm.iconOn === false) { clearInterval(int) }

        }, 1000);

        return () => {
            clearInterval(int)
        }
    }, [newCountDown[0].alarm.iconOn]);



    return (
        <></>
    )
}
const mapStateToProps = (state) => {
    console.log(state);
    return {
        items: state.item,
    }
}
const mapDispatchToProps = (dispatch) => {
    return {
        alarmOn: (id) => { dispatch({ type: 'ALARM_ON', id: id }) },
        alarmOff: (id) => { dispatch({ type: 'ALARM_OFF', id: id }) },
        countDown: (id, count) => { dispatch({ type: 'COUNT_DOWN', id: id, count: count }) }


    }
}

export default connect(mapStateToProps, mapDispatchToProps)(CountDown)

 

Answer 1

Chcesz wywołać console.log w ternarce, a linter krzyczy, ponieważ jest to niezgodne z regułą no-unused-expressions.

Możesz spróbować włączyć opcję allowTernary w konfiguracji eslinta, albo "zfallbackować" wynik wywołania console.log do null (co swoją drogą może być źle widziane przez regułę allowShortCircuit lintera) lub poprzedzić to wywołanie void-em. Żadne z tych obejść nie będzie dobrą praktyką, ale może pozwolą ominąć lintera - jeśli włączenie reguły allowTernary nie pomoże.

Ewentualnie zablokuj działanie lintera w tamtych miejscach: https://eslint.org/docs/2.13.1/user-guide/configuring#disabling-rules-with-inline-comments-1.

Ja bym jednak zamiast ternarki użył zwykłego if..else, bo ternary w formie, jakiej Ty użyłeś jest raczej obecne w zminifikowanym kodzie przeznaczonym na produkcje niż w wersji, na której pracują developerzy. Pamiętaj, że nawet jeśli Tobie dana forma kodu się podoba, nie oznacza, że dla innych w zespole będzie również mile widziana (może być trudna w zrozumieniu lub być podatna na błędy). Dlatego nawet jeśli jakieś obejścia zadziałają, to na ewentualnym code review ktoś może się do tego (słusznie) przyczepić i wtedy wypada uargumentować, dlaczego preferowałeś użyć ternarki zamiast if..else.

Comments

dzięki