可以将相同的参数名称用作函数 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 置于 state 中，并且即使 prop 被更改，该状态值也不会改变

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