可以將相同的參數名稱用作函數 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/>);
}