正确使用 useState 变量答案

【问题标题】：Correctly use useState variable正确使用 useState 变量
【发布时间】：2019-09-22 18:24:56
【问题描述】：

我正在尝试将带有 useState 的 prop id 应用于我的 DrumPad 组件，该组件是从其父 App 组件传入的。在我的 app.js 文件中，正如当前设置的那样，我收到一个错误“'id' is assigned a value but never used.”假设我需要使用 useState 设置变量以将 id 传递给 DrumPad 组件，我需要更改什么才能正确应用它？

App.js：

const sounds = [
  { id: 'snare', letter: 'Q', src: 'https://www.myinstants.com/media/sounds/snare.mp3' },
  { id: 'bass 1', letter: 'W', src: 'https://www.myinstants.com/media/sounds/bass-drum.mp3' },
  // etc. 
];

const App = () => {
  const id = useState(''); // (Don't have setId since it won't change)

  return (
    <div className="App">
      {sounds.map(sound => (
        <DrumPad
          id={sounds.id}
        />
      ))}
    </div>
  );
}

DrumPad.js：

const DrumPad = () => {
  return (
    <div id="id">

    </div>
  );
}

更新：

我发现不使用 useState 设置状态也可以正常工作，所以我是这样做的（但不确定是否最佳）：

const App = () => {

  return (
    <div className="App">
      {sounds.map(sound => (
        <DrumPad
          id={sound.id}
        />
      ))}
    </div>
  );
}


const DrumPad = (props) => {

  return (
    <div id={props.id}>
    </div>
  );
}

【问题讨论】：

标签： javascript reactjs react-hooks

【解决方案1】：

您误用了useState，并引用了错误的变量，而且您并没有真正在代码中使用id 状态。

请参考Destructuring assignment、useState、Props in JSX

const sounds = [
  { id: 'snare', letter: 'Q', src: 'https://www.myinstants.com/media/sounds/snare.mp3' },
  { id: 'bass 1', letter: 'W', src: 'https://www.myinstants.com/media/sounds/bass-drum.mp3' },
  // etc. 
];

const App = () => {

// useState returns an array (Tuple), you may use id[0] for the initial value
// const id = useState('');


//     v In case you don't want to use setId - 
// Thats how the "Destructuring assignment" works
const [id] = useState('');


  return (
    <div className="App">
      {sounds.map(sound => (
        <DrumPad
            id={sound.id}

//              v You referenced the global `sounds` variable which is an array
//          id={sounds.id}
        />
      ))}
    </div>
  );
}

另外，你应该使用 props 来引用你传递的属性：

const DrumPad = (props) => {
  const { id } = props;
  return <div id={id}/>
}

【讨论】：

【解决方案2】：

使用 useState 钩子声明的值使用元组语法声明，一个变量表示值本身，第二个变量是用于更改该值的 setter 函数，尽管您可以在没有 setter 的情况下声明它。你可以阅读状态钩子here。

但如果id 永远不会改变，这意味着它将被永久设置为空字符串，这似乎不是预期的结果。您还应该问自己为什么要在 state 中存储静态值而不是使用 prop（如果可能的话），使用 React state 的优势之一是它能够自动检测更改并进行更新。在不了解更多您想要的功能的情况下很难找到更合适的替代方案，但现在我不明白如何在不更改 id 的情况下获得实际值。

看起来你想映射你的声音数组，然后可能使用id 来存储当前选择的声音，如果不使用 setter 函数在单击所需声音时更改该 ID，这是不可能的或以其他方式选择。

【讨论】：

【解决方案3】：

您使用的 sound.id 不是您使用 useState 设置的变量，尽管您对 useState 的使用也不正确，以及您对声音的使用（它是一个数组而不是对象，所以您不能说声音.id. 你需要做一些类似声音[1])

要消除错误并保持传递给 DrumPad 的 prop 作为状态，请将声音数组移动到 App 组件中并执行 const [id, setId] = useState(sounds[1])。（或者你可以选择你想要的数组中的任何项目）

你会想要 setId 因为你说它是状态。您可以在使用它之前将其删除，但如果您从不使用它，则 'id' 不应该是状态。

【讨论】：