0

Есть вот такая компонента

const Game = () => {
    let fieldsArr = {}
    let fieldId = 0
    for (let i = 0; i < 3; i++) {
        for (let j = 0; j < 3; j++) {
            fieldsArr[fieldId] = {
                isClicked: false,
                pos: [j, i],
                user: '',
                isHover: false
            }
            fieldId++
        }
    }

    let [user, setUser] = useState('cross')

    let [win, setWin] = useState('')

    let [fields, setFields] = useState({...fieldsArr})

    let [score, setScore] = useState({
        cross: 0,
        circle: 0
    })

    useEffect(() => {
        let checkWinOrDraw = analyzeMap(fields)
        if (checkWinOrDraw) {
            if (checkWinOrDraw !== 'draw') {
                console.log(score)
                setScore(prevScore => ({...prevScore, [checkWinOrDraw]: prevScore[checkWinOrDraw]++}))
                console.log(score)
            }
            setWin(checkWinOrDraw)
        }
    }, [fields])

    const onClick = (e) => {
        const fieldId = e.target.id
        if (!fields[fieldId].isClicked) {
            setFields(prevFields => ({
                ...prevFields,
                [fieldId]: {
                    ...prevFields[fieldId],
                    isClicked: true,
                    user: user
                }
            }))
            setUser(prevUser => prevUser === "cross" ? "circle" : "cross")
        }
    }

    const handleModalClose = () => {
        setFields({...fieldsArr})
        setWin('')
    }

    const handleMouseEnter = (e) => {
        let fieldId = e.target.id
        if (!fields[fieldId].isClicked) {
            setFields(prevFields => ({
                ...prevFields,
                [fieldId]: {
                    ...prevFields[fieldId],
                    isHover: true
                }
            }))
        }
    }
    const handleMouseLeave = (e) => {
        let fieldId = e.target.id
        if (!fields[fieldId].isClicked) {
            setFields(prevFields => ({
                ...prevFields,
                [fieldId]: {
                    ...prevFields[fieldId],
                    isHover: false
                }
            }))
        }
    }

    return (
        <>
            <ScoreBoard score={score}/>
            <div className="shadow tic-tac-toe">
                {
                    Object.keys(fields).map(key => {
                        return (
                            <div
                                key={key}
                                id={key}
                                className={
                                    `shadow tic-tac-toe__field bg-gradient ${fields[key].user ? fields[key].user === 'cross' ? 'bg-primary' : 'bg-danger' : 'no'}`
                                }
                                data-column={fields[key].pos[0]}
                                data-row={fields[key].pos[1]}
                                data-user={fields[key].user}
                                onClick={onClick}
                                onMouseEnter={(e) => handleMouseEnter(e)}
                                onMouseLeave={(e) => handleMouseLeave(e)}
                            >
                            <span id={key}
                                  className={`shape ${fields[key].user} ${!fields[key].user && fields[key].isHover ? user : ''}`}
                                  data-user={fields[key].user}
                            />
                            </div>
                        )
                    })
                }
                <div className={`message${win ? " open" : ""}`} id="win">
                    <div className="shadow message__body">
                        <h1 className={`message__title text-${win === 'cross' ? 'primary' : win === 'circle' ? 'danger' : 'default'}`}>
                            {win === 'cross' ? "Победили крестики!!!" : win === 'circle' ? "Победили нолики" : "Ничья."}
                        </h1>
                        <button onClick={handleModalClose}
                                className={`message__button btn btn-${win === 'cross' ? 'primary' : win === 'circle' ? 'danger' : 'dark'}`}>Start
                            new game!
                        </button>
                    </div>
                </div>
            </div>
        </>
    )
}

const ScoreBoard = ({score}) => {
    return(
        <div className="shadow scoreboard">
            <h1 className="scoreboard__title">Счёт</h1>
            <div className="user-panel">
                <div className="shadow user-info bg-primary bg-gradient">
                    <span className="x-user-score">{score.cross}</span>
                </div>
                <div className="shadow user-info bg-danger bg-gradient">
                    <span className="o-user-score">{score.circle}</span>
                </div>
            </div>
        </div>
    )
}
                

на локалке всё работает и счёт прибавляется, и багов не возникает, но в build версии и при деплое на gh счёт перестаёт работать, то есть в useEffect setScore не увеличивает счёт на единицу почему-то, почему это происходит? https://sinelnikov-web.github.io/react-tic-tac-toe/

1 ответ 1

0

UPD: Вопрос решён, проблема была в setScore(prevScore => ({...prevScore, [checkWinOrDraw]: prevScore[checkWinOrDraw]++})), а именно в prevScore[checkWinOrDraw]++, который я заменил на prevScore[checkWinOrDraw] + 1 и всё заработало, могу предположить что такое поведение было из-за того, что была постфиксная запись инкремента, других вариантов придумать не могу. Но всё же не понятно, почему в локальном виде всё работало, но в build версии нет

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.