Question

我试图将具有useState的道具id应用于我的DrumPad组件，该组件是从其父App组件传入的。在我的app.js文件中，由于它是当前设置的，所以出现错误“'id'被分配了一个值，但从未使用过”。假设我需要使用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>
  );
}

Answer 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>
  );
}

此外，您应该使用道具来引用传递的属性：

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

Answer 2

您正在使用sounds.id，这不是您使用useState设置的变量，尽管您对useState的使用也不正确，以及您对声音的使用（这是一个数组，不是对象，所以您不能说出声音） .id。您需要执行类似声音的操作[1]）

要消除错误，并使prop作为状态传递到DrumPad，请将声音数组移至App组件，并执行const [id，setId] = useState（sounds [1]）。（或者您可以选择所需的数组中的任何项）

您将要拥有setId，因为您说的是状态。您可以在使用前将其删除，但是如果您从未使用过，则不应将'id'声明为状态。

Answer 3

使用useState挂钩声明的值使用元组语法声明，其中一个变量表示值本身，第二个变量是用于更改该值的设置器函数，尽管您可以在不使用设置器的情况下对其进行声明。您可以了解有关状态挂钩here的信息。

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

您似乎要映射到声音阵列，然后可能使用id存储当前选择的声音，如果不使用setter函数在需要的声音时更改该id，将无法存储该声音单击或以其他方式选择。

正确使用useState变量

3 个答案: