更新鼠标输入时显示的数据

Question

我想更新显示在<div>元素内的文本。我希望在光标进入<div>元素时执行此操作。

基本上我从API获取一些数据，我只显示一个参数(name)。如果用户输入<div>并显示其名称，我想显示一些详细信息，即description和price。

这是我试图完成我的任务的代码。

import {useEffect, useState} from "react";
import requestOptionsGet from "../utilities/requestOptions";
import validateResponse from "../utilities/validators";

const Warehouse = () => {
    const [items, setItems] = useState([]);
    const [texts, setTexts] = useState([]);
    const getItems = async () => {
        const url = "http://localhost:8000/api/items/"
        return await fetch(url, requestOptionsGet)
            .then((response) => validateResponse(response, url))
            .then((response) => response.json())
            .then((data) => setItems(data))
    };
    useEffect(() => {
        getItems();
    }, []);
    useEffect(() => {
        setTexts(items.map((item) => (
            {
                id: item.id,
                name: item.name,
                description: item.description,
                price: item.price,
                currentDisplay: <h2>{item.name}</h2>,
            })
        ))
    }, [items]);
    const displayName = (data) => {
      console.log(
          "displayName"
      );
    };
    const displayDetails = (data) => {
        const itemID = parseInt(data.currentTarget.getAttribute("data-item"));
        const displayInfo = texts.find(text => text.id === itemID);
        displayInfo.currentDisplay = <p>{displayInfo.description}</p>
        setTexts(texts);
        console.log(texts);
        console.log(
            "displayDetails"
        );
        return(
            displayInfo.currentDisplay
        );
    };
    return(
          <div className="container">
              <h1>Your warehouse.</h1>
              <h2>All your items are listed here.</h2>
              <hr />
              {texts.map((text) => (
                  <button className="container-for-single-item" id={text.id} key={text.id}
                          onMouseEnter={displayDetails} onMouseLeave={displayName} data-item={text.id}>
                      {text.currentDisplay}
                  </button>
             ))}
          </div>
    );
}
export default Warehouse;

功能工作(一切都显示在控制台中，因为它应该是)，甚至texts的变化。然而，这一段没有出现。我如何修复我的代码?谢谢!

Answer 1

永远不要直接修改状态

const newTexts = texts.map(text => text.id === itemID ? { ...text, currentDisplay: <p>{text.description}</p> } : text);
setTexts(newTexts);