Правильно используйте переменную useState

Question

Я пытаюсь применить опору id с useState к моему компоненту DrumPad, переданному из его родительского компонента App.В моем файле app.js, как он настроен в настоящий момент, я получаю сообщение об ошибке «id назначено значение, но оно никогда не используется».Предполагая, что мне нужно установить переменную с помощью useState для передачи идентификатора компоненту 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 в своем коде.

Пожалуйста, обратитесь к Разрушающее присваивание , useState, Реквизиты в 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

Значения, объявленные с помощью ловушки useState, объявляются с синтаксисом кортежа, при этом одна переменная представляет само значение, а вторая является функцией-установщиком, используемой для изменения этого значения, хотя вы можете объявить это без установщика.Вы можете прочитать о хуке состояния здесь .

Но если id никогда не изменится, это означает, что он будет постоянно установлен как пустая строка, что не похоже на этобыл бы желаемый результат.Вам также следует спросить себя, почему вы сначала сохраняете статическое значение в своем состоянии, а не используете реквизит, если это возможно, одной из сильных сторон использования состояния React является его способность автоматически обнаруживать изменения и вносить обновления.Трудно найти более подходящую альтернативу, не зная больше вашей желаемой функциональности, но сейчас я не понимаю, как вы могли бы когда-либо иметь реальное значение для своего идентификатора без его изменения.

Похоже, вы хотите отобразить массив звуков, а затем, вероятно, использовать id для сохранения выбранного в данный момент звука, что было бы невозможно без использования функции сеттера для изменения этого идентификатора при нажатии на нужный звук или иным образомвыбран.

Answer 3

Вы используете sounds.id, который не является переменной, которую вы задали с помощью useState, хотя ваше использование useState также некорректно, как и использование звуков (это массив, а не объект, поэтому вы не можете произносить звуки.id. Вам нужно сделать что-то наподобие звука [1])

Чтобы избавиться от ошибки и оставить пропущенную в DrumPad опору в качестве состояния, переместите массив звуков в компонент App и выполните const [id, setId] = useState (звучит [1]).(или вы можете выбрать любой элемент массива, который вам нужен)

Вы захотите иметь setId, потому что вы говорите, что это состояние.Вы можете удалить его до тех пор, пока вы его не используете, но если вы его никогда не используете, «id» не должен быть состоянием.