React Hook «useState» не может быть вызван внутри обратного вызова

Есть ли другой способ сделать это без необходимости размещать переменные useState вне функции карты?

const slimy = [];
{
  slimy.map(function (item) {
    const [count, setCount] = useState("");

    return (
      <ListItem
        key = {item.createdAt}
        style = {{ display: "flex", justifyContent: "center" }}
      >
        <div>
          <p>{count}</p>

          <button onClick = {() => setCount(count + 1)} />
        </div>
      </ListItem>
    );
  });
}

Да, просто сделайте jsx внутри карты другим компонентом.

Keith 25.12.2020 19:45
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
4
1
2 482
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Вместо этого вы можете поместить массив в состояние:

const [countArr, setCountArr] = useState(
  () => new Array(slimy.length).fill(0)
);
return slimy.map(function(item, i){
  <ListItem key = {item.createdAt} style = {{ display: 'flex', justifyContent: 'center'}}>
    <div>
      <p>{countArr[i]}</p>
      <button onClick = {() => { setCountArr(
        countArr.map((count, j) => i === j ? count + 1 : count)
      ) }} />
      </div>
  </ListItem>)
});
Ответ принят как подходящий

Вы можете определить пользовательский компонент.

{
  slimy.map(function (item) {
    return (
      <CustomItem key = {item.createdAt} names = {item.names} />
    );
  });
}
const CustomItem = (props) => {
   console.info(props.names);  // <----------------
   const [count, setCount] = useState(0);
   return (
     <ListItem style = {{ display: "flex", justifyContent: "center" }}>
       <div>
         <p>{count}</p>
         <button onClick = {() => setCount(count + 1)} />
       </div>
     </ListItem>
   )
}

Итак, как я могу использовать элементы из списка в отдельном компоненте?

Raphael Inyang 25.12.2020 20:03

например, список содержит имена, где я буду отображать список имен?

Raphael Inyang 25.12.2020 20:06

так же, как item.createdAt, где я буду использовать item.names?

Raphael Inyang 25.12.2020 20:07

вы отметите и проголосуете, если это правильный ответ?

Prime 25.12.2020 20:09

Давайте продолжим обсуждение в чате.

Prime 25.12.2020 20:10

да, конечно, я буду, если я попробую, и это сработает

Raphael Inyang 25.12.2020 20:10

Другие вопросы по теме