React Hooks useState 改变多个元素 state in one mouseOver function 只想改变一个 mouseover

Question

我在第 61-67 行有以下组件控制编辑图标的一些 state，它可以工作，但它会更改 state 的值，用于列中所有项目的列中的跨度，我希望它只更改列项目或 rowItem 改变 state，即； hover 在 span 元素上显示了一个编辑图标，在多个其他 span 中未显示。

这与 state 在两个位置发生变化的脸部有关，但我不知道如何将组件隔离为仅悬停的组件而不是生成的其他组件。 希望这是有道理的。

提前谢谢

这是我的代码

import Link from "next/link";
import Layout from "../components/Layout";
import useSWR from "swr";
import { INPUT_VALUES } from "./formBuilder";
import { useQuery } from "@apollo/client";
import React, { useEffect, useState } from "react";
import styled from "styled-components";
import { RiEdit2Fill } from "react-icons/ri";
import { useRouter } from "next/router";

const Wrap = styled.div``;

const Grid = styled.div`
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 225px));
  background: lightgrey;
  /* grid-template-columns: 1fr 1fr 1fr 1fr; */
`;

const RowItem = styled.p`
  &:hover {
    cursor: pointer;
    background: lightyellow;
  }
`;

const fetcher = (url) => fetch(url).then((r) => r.json());

const HoverableRow = ({ rowEdit, d, i }) => {
  const [editState, setEditState] = useState(false);

  return (
    <RowItem
      onClick={() => rowEdit(d.ref["@ref"].id)}
      onMouseEnter={setEditState(true)}
      onMouseLeave={setEditState(false)}
      className="test"
    >
      <span>
        {Object.values(d.data)[i] ? Object.values(d.data)[i] : "null"}
      </span>
      <span>
        {editState ? (
          <a>
            <RiEdit2Fill />
          </a>
        ) : (
          <a></a>
        )}
      </span>
    </RowItem>
  );
};

const Value = ({ data, i }) => {
  const router = useRouter();

  const rowEdit = (id) => {
    console.log(id);
    router.push(`rowEdit/${id}`);
  };

  return (
    <div>
      {data ? (
        data.map((d) => (
          <div key={`${Object.values(d.data)[i]}-${i}`}>
            <HoverableRow {...{ rowEdit, d, i }} />
            {/* <p>{d.ref["@ref"].id}</p> */}
          </div>
        ))
      ) : (
        <>
          <p>loading</p>
        </>
      )}
    </div>
  );
};

const Home = () => {
  const { data, error } = useSWR("/api/data", fetcher);

  const { loading, error: inputError, data: inputNames } = useQuery(
    INPUT_VALUES
  );

  const [inputDataState, setInputDataState] = useState([]);

  useEffect(() => {
    const inputData = inputNames?.allFormInputVals?.data;
    setInputDataState(inputData);
  }, [inputNames]);

  //console.log(inputDataState);
  //console.log(data);

  data?.map((d, i) => {
    console.log(d);
  });

  return (
    <Layout>
      <h1>Welcome to your Catalog</h1>
      <Grid>
        {inputDataState?.map((item, i) => {
          return (
            <Wrap key={item._id}>
              <div>
                <h2>{item.name}</h2>
              </div>
              <form>
                <Value i={i} data={data} />
              </form>
            </Wrap>
          );
        })}
      </Grid>
    </Layout>
  );
};

export default Home;

Answer 1

将每个RowItem放入不同的组件中，这样每个组件都可以有一个单独的editState ：

const HoverableRow = ({ rowEdit, d, i }) => {
    const [editState, setEditState] = useState(false);
    return (
        <RowItem
            onClick={() => rowEdit(d.ref["@ref"].id)}
            onMouseEnter={() => setEditState(true)}
            onMouseLeave={() => setEditState(false)}
            className="test"
        >
            <span>
                {Object.values(d.data)[i] ? Object.values(d.data)[i] : "null"}
            </span>
            <span>
                {editState ? (
                    <a>
                        <RiEdit2Fill />
                    </a>
                ) : (
                        <a></a>
                    )}
            </span>
        </RowItem>
    );
};

和改变

<div key={`${Object.values(d.data)[i]}-${i}`}>
    <RowItem
        ...

至

<div key={`${Object.values(d.data)[i]}-${i}`}>
  <HoverableRow {...{ rowEdit, d, i }} />
</div>