Question

我正在尝试使用 react、dnd-react 制作名为 Cartographers 的棋盘游戏副本。当组件渲染时，它会获得随机类型的地形，并根据地形类型具有不同的颜色。我的问题是，当我将 Slice 放在板上的某个位置时，它会触发使用 randomTerrain() 的 end 函数。新切片再次获得随机地形类型和新颜色。但是当我尝试 console.log(slice) 时，它总是打印由 useState 设置的第一个地形，这是问题，因为我需要将它传递给 Board 组件，它也总是只获取第一个地形类型作为 console.log （片）。它显然更改为正确状态，但需要 10 分钟。预先感谢您的帮助:)

import { Text, Center } from '@chakra-ui/react'
import React, { useState } from 'react'
import { useDrag } from 'react-dnd'
import { ItemTypes } from '../utils/Constants'

export default function Slice() {

    const possibleTerrain = ["water", "field", "forrest", "village"]
    const [slice, setSlice] = useState(possibleTerrain[Math.floor(Math.random() * possibleTerrain.length)])


    const randomTerrain = () => {
        const index = (Math.floor(Math.random() * possibleTerrain.length));
        setSlice(possibleTerrain[index]);
        console.log(slice)
    }


    const [{ isDragging }, drag] = useDrag(() => ({
        type: ItemTypes.SLICE,
        item: { slice },
        collect: monitor => ({
            item: monitor.getItem(),
            isDragging: !!monitor.isDragging(),
        }),
        end: (props, monitor) => {
            if (monitor.didDrop()) {
                randomTerrain();
            }
        },
    }))

    const componentStyle = {
        water: { backgroundColor: "blue" },
        field: { backgroundColor: "yellow" },
        forrest: { backgroundColor: "green" },
        village: { backgroundColor: "red" },
    }[slice];

    return (
        <Center ref={drag} w="5.9vw" h="7.72vh" style={componentStyle} >
            <Text>{slice}</Text>
        </Center>
    )
}

React-dnd 状态没有改变

0 个答案: