javascript - 无法在回调中调用 React Hook "useState"

Question

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

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

Answer 1

您可以定义自定义组件。

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

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