单击按钮进行 API 调用并显示响应

Question

我有一个对象数组，我正在处理我想要的响应，单击“阅读更多”按钮它将进行 API 调用并显示响应的结果，“阅读更多”按钮不应该以同样的方式在其他情况下显示该记录。

我能够在 UI 中迭代我想要的 stockNewsData，当我单击“阅读更多”时，它将使用映射记录 sr_no 作为 API 的参数进行 API 调用，并显示响应结果，并且“阅读更多”按钮不应显示点击的记录

const stockNewsData =  [
        {
            "sr_no": 230580390285.0,
            "caption": "Cochin Shiptard123"
        },
        {
            "sr_no": 230460390173.0,
          "caption": "Cochin Shiptard456" 
        },
        {
            "sr_no": 230540390285.0,
            "caption": "Cochin Shiptard789"
        },
        {
            "sr_no": 230430390173.0,
            "caption": "Cochin Shiptard345511" 
        }
];

const getDetailedNews = async (sr_no) => {
    try {
      const res = await axios.get(`${CMOTS_URL}/Company-News-Details/${sr_no}`);
         console.log(res);
    } catch (err) {
      console.log("err", err);
    }
};

<div className="news">
  {stockNewsData.map((item) => (
   <div className="newsbox">
    <h4>{item?.caption}</h4>
    <p onClick={() => getDetailedNews(item.sr_no)}>Read More</p>
    <p>need to display the response here </p>                            
    </div>
  ))}
</div>

Answer 1

如果我猜对了，请尝试这个。

import React, { useState } from 'react';
import axios from 'axios';

const stockNewsData = [
  {
    "sr_no": 230580390285.0,
    "caption": "Cochin Shiptard123"
  },
  {
    "sr_no": 230460390173.0,
    "caption": "Cochin Shiptard456"
  },
  {
    "sr_no": 230540390285.0,
    "caption": "Cochin Shiptard789"
  },
  {
    "sr_no": 230430390173.0,
    "caption": "Cochin Shiptard345511"
  }
];

const getDetailedNews = async (sr_no, setNewsData) => {
  try {
    const res = await axios.get(`${CMOTS_URL}/Company-News-Details/${sr_no}`);
    setNewsData(prevState => ({
      ...prevState,
      [sr_no]: res.data // Store response data with sr_no as key
    }));
  } catch (err) {
    console.log("err", err);
  }
};

const NewsComponent = () => {
  const [newsData, setNewsData] = useState({}); // State to store detailed news data

  return (
    <div className="news">
      {stockNewsData.map((item) => (
        <div className="newsbox" key={item.sr_no}>
          <h4>{item?.caption}</h4>
          {newsData[item.sr_no] ? (
            <div>
              <p>{newsData[item.sr_no]}</p> {/* Display response data */}
            </div>
          ) : (
            <p onClick={() => getDetailedNews(item.sr_no, setNewsData)}>Read More</p>
          )}
        </div>
      ))}
    </div>
  );
};

export default NewsComponent;