点击Read More按钮调用API展示响应并隐藏对应按钮的实现问题

要实现点击单条新闻的「Read More」按钮加载详情、隐藏按钮且不影响其他新闻的需求，你需要通过状态管理每条新闻的独立加载状态和详情数据，具体修改如下：

1. 添加状态管理详情数据 #

在组件中引入useState，用一个对象存储每条新闻的详情（以sr_no作为唯一键）：

import { useState } from 'react';

// 原stockNewsData和getDetailedNews保持不变

const YourComponent = () => {
  // 存储每条新闻的详情，key为sr_no，value为接口返回的详情数据
  const [newsDetails, setNewsDetails] = useState({});

  const getDetailedNews = async (sr_no) => {
    try {
      const res = await axios.get(`${CMOTS_URL}/Company-News-Details/${sr_no}`);
      // 更新状态，保留已有数据的同时添加当前新闻的详情
      setNewsDetails(prevState => ({
        ...prevState,
        [sr_no]: res.data // 假设接口返回的有效数据在res.data中，可根据实际结构调整
      }));
    } catch (err) {
      console.log("err", err);
    }
  };

  // ...渲染逻辑
};

2. 修改渲染逻辑，控制按钮显示与详情展示 #

在遍历渲染新闻时，根据当前新闻的sr_no是否存在于newsDetails中，决定是否显示「Read More」按钮和详情内容：

<div className="news">
  {stockNewsData.map((item) => {
    // 判断当前新闻是否已加载详情
    const hasLoadedDetails = !!newsDetails[item.sr_no];
    return (
      <div className="newsbox" key={item.sr_no}> {/* 必须添加唯一key，避免渲染异常 */}
        <h4>{item?.caption}</h4>
        {/* 仅当未加载详情时显示Read More按钮 */}
        {!hasLoadedDetails && (
          <p onClick={() => getDetailedNews(item.sr_no)}>Read More</p>
        )}
        {/* 已加载详情时展示内容 */}
        {hasLoadedDetails && (
          <div className="news-detail-content">
            {/* 根据接口返回的实际字段渲染，示例用content字段，可自行调整 */}
            <p>{newsDetails[item.sr_no].content}</p>
            {/* 若有其他字段（如发布时间、来源等）可继续添加 */}
          </div>
        )}
      </div>
    );
  })}
</div>

关键说明 #

• 用sr_no作为状态对象的键，确保每条新闻的详情状态独立，互不干扰；
• 通过setNewsDetails的函数式更新，避免覆盖已加载的其他新闻详情；
• 添加key属性是React列表渲染的要求，保证组件更新效率和正确性。

内容的提问来源于stack exchange，提问作者Sandeep Mukherjee