当我要在单人列表中悬停时，我正面临这个问题。我只想在悬停时只在一个列表上显示X。但它显示在所有的当我去悬停在一个单一的。

import React from "react";
import { useState } from "react/cjs/react.development";
import "./list.css";

function List({ items }) {
  const [over, setOver] = useState(false);

  const mouseOver = () => {
    setOver(!over);
  };

  return (
    <ul>
      {items.map((item, i) => {
        return (
          <>
            <li
              onMouseOver={mouseOver}
              onMouseOut={mouseOver}
              style={{
                borderRight: `5px solid ${item.amount < 0 ? "red" : "green"}`,
              }}
              key={i}
              className="item-name"
            >
              <p>{item.itemName}</p>
              <p>{item.amount}</p>
              <p style={{ display: over ? "block" : "none" }}>X</p>
            </li>
          </>
        );
      })}
    </ul>
  );
}

export default List;

顺晟科技：

在每个项中都应该有状态，并且不应该为所有项共享状态。我是这样写的:

您正面临此问题，因为所有s共享相同的状态。您要么需要为每个组件定义一个状态，要么使用纯css（我更喜欢这种方法:

纯CSS mehtod:

import React from "react";
import { useState } from "react/cjs/react.development";
import "./list.css";

function List({ items }) {
  const [over, setOver] = useState(false);

  const mouseOver = () => {
    setOver(!over);
  };

  return (
    <ul>
      {items.map((item, i) => {
        return (
          <>
            <li
              onMouseOver={mouseOver}
              onMouseOut={mouseOver}
              style={{
                borderRight: `5px solid ${item.amount < 0 ? "red" : "green"}`,
              }}
              key={i}
              className="item-name"
            >
              <p>{item.itemName}</p>
              <p>{item.amount}</p>
              <p style={{ display: over ? "block" : "none" }}>X</p>
            </li>
          </>
        );
      })}
    </ul>
  );
}

export default List;