TypeError:不能在React子组件中分配只读属性

Question

我在App.js中声明了一个全局变量。它是在App.js中的my App()函数之外声明的。

我将这些数据作为道具传递给我的子函数使用plyViewed={plyViewed}

我得到的错误是当我试图更新plyview。例如…

props.plyViewed--

似乎只读。

我做错了什么?

export default function MoveButtons(props) {
return (
<Grid item xs={6}>
<Button
variant="contained"
color="primary"
size="large"
style={{ maxWidth: props.buttonWidth, minWidth: props.buttonWidth }}
onClick={() => {
if (props.plyViewed > 0) {
props.plyViewed--;
props.board.current.setPosition(props.fenHistory[props.plyViewed]);
props.setFen(props.fenHistory[props.plyViewed]);
props.setSelectedIndex(props.plyViewed);
}
}}
>
<NavigateBeforeIcon />
</Button>
</Grid>
);
}

Answer 1

这不是你如何改变从父组件传递的值。首先，变量必须被定义为钩子。你必须把它传递给子组件，但你也必须传递一个函数来改变它，然后你在子组件中使用它。

在这里我创建了一个示例，展示了你应该如何做。