相同的参数名称可以用作函数param和local吗

Question

我想创建一个函数组件-"Task"，参数名为id，并将此参数保存在同名状态：

const Task = ({ id,text }) => {
const [id] = useState(id);    // ERROR: identifier 'id' has already been declared

return ( <div/>);
}```
I'm using Task like this: 
```class App extends Component {
render() { 
<Task id='123' text='TEXT' />
}```

Answer 1

您已经在作用域中定义了变量名。

const Task = ({ id:idParam, text }) => {
const [id] = useState(idParam);    // Should suffice

return ( <div/>);
}```

Answer 2

const Task = ({ id, text }) => {
const [id] = useState(id);
// ...
}

相当于

const Task = (params) => {
let { id, text } = params
const [id] = useState(id);
// ...
}

导致重新声明，从而产生错误

相反，你可以用另一个变量进行破坏

const Task = ({ id: passedId, text }) => {
const [id] = useState(passedId);
// ...
}

或者只使用一个传递的参数

const Task = (params) => {
const [id] = useState(params.id);
// ...
}

Answer 3

撇开错误不谈，当我们必须将道具保持在一种状态时，似乎出现了问题，我可能会跳过const [id] = useState(id);，在组件中使用道具中的id。

如果id从父级(App(更改，则Task仍然引用旧值，因为最初我们将id置于状态，即使道具更改，该状态值也不会更改

const Task = ({ id, text }) => 
....        
return ( <div/>);
}