Question

我正在构建一个应用程序，我想在屏幕上用给定的 x 位置渲染带有 position:"fixed" 的组件，然后每个组件应该在渲染之前计算 x 的顶部/左侧属性。但是当我添加一个组件时，它似乎在计算样式对象之前呈现。当父组件的数组中添加一个新的子组件时，每个子组件的位置都应该改变。

这是调用子组件的父组件

{players.map((player, i) => {
            let positions = playerPosition(players.length);
            let x = positions[i][0];
            let place = positions[i][1];
            return (
                <Player key={i} x={x} placement={place}></Player>

            )
        })}

这是子组件

export default function Player({ playerObject, x, placement }){
const classes = useStyles();
const [position, setPosition] = useState();
const [size, setSize] = useState({height:10, width:10});
const [xPos, setXPos] = useState();
const [yPos, setYPos] = useState();
var y;
const [style, setStyle] = useState();


useEffect(() => {
    setXPos(x);
    y = findPlayerYPos(x);
    setYPos(y)
    setStyle({
        position: 'fixed',
        width: size.width,
        height: size.height,
        top: y - size.height / 2 + window.innerHeight / 2,
        left: x - size.width / 2 + window.innerWidth / 2,
    })
}, [x])

return (
    <Paper
    className={classes.paper}
    style={style}
    ></Paper>
)

} 当只有 1 个玩家可以渲染时，它很好，但是当我更新玩家数组时，它们都在屏幕中间渲染（x=0，y=0）。我从 findPlayerYPos 执行了 console.log 我的 y 并且它应该是它应该是但组件似乎在定义之前呈现。

React 子组件没有在它应该渲染的地方渲染

0 个答案: