Javascript “反应钩”；“使用状态”；无法在回调内调用

有没有其他方法可以做到这一点，而不必将useState变量放在map函数之外

const slimy=[]；
{
slimy.map（功能（项目）{
const[count，setCount]=useState（“”）；
返回(
{count}

设置计数（计数+1）}/>
);
});
}

您可以将数组置于以下状态：

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

const[countArr，setCountArr]=useState(
（）=>新数组（slimy.length）.fill（0）
);
返回slimy.map（函数（项，i）{
{countArr[i]}

{setCountArr(
countArr.map（（count，j）=>i==j？count+1:count）
) }} />
)
});

您可以定义自定义组件

{
  slimy.map(function (item) {
    return (
      <CustomItem key={item.createdAt} names={item.names} />
    );
  });
}

{
slimy.map（功能（项目）{
返回(
);
});
}

const CustomItem=（道具）=>{
console.log（props.names）；//
)
}

是的，只需将地图中的jsx制作成另一个组件。那么，我如何使用单独组件中列表中的项目？你可以作为道具传递，我更新了答案例如，列表包含名称，我将在哪里呈现名称列表？你会检查更新后的答案吗？就像

项。createdAt

一样，我将在哪里使用

项。名称

？

const CustomItem = (props) => {
   console.log(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>
   )
}