React.js中如何过滤对象状态变量并解决数据处理与传值问题？

父组件数据处理时机错误的修复 #

fetch是异步操作，你在useEffect里调用fetch_BSE_Data()后立刻执行makeMyNewData()，此时stock_data还没被异步更新，所以处理逻辑拿到的是空数组。另外直接用全局变量myNewData并覆盖原stock_data的方式也容易导致状态混乱，建议拆分状态或在fetch完成后直接处理数据：

方案1：在fetch回调中直接处理数据

修改数据获取逻辑，拿到原始数据后直接处理，再设置到状态中：

const [processedStockData, setProcessedStockData] = useState([]);

const fetchAndProcessData = () => {
  fetch("https://api.bseindia.com/BseIndiaAPI/api/DefaultData/w?Fdate=20220912&Purposecode=P9&TDate=20221216&ddlcategorys=E&ddlindustrys=&scripcode=&segment=0&strSearch=S")
    .then(response => response.json())
    .then(rawData => {
      const processedData = rawData.map(item => {
        const [first, rest, end] = item.Purpose.split("-");
        return {
          short_name: item.short_name,
          long_name: item.long_name,
          div_or_share: first.trim(), // 去除分割后字符串的多余空格
          Ex_date: item.Ex_date,
          div_amount: isNaN(Number(end)) 
            ? "-" 
            : `Rs. ${Number(end).toFixed(2)}`
        };
      });
      setProcessedStockData(processedData);
    });
};

useEffect(() => {
  fetchAndProcessData();
}, []);

// 传递处理后的数据给子组件
<DividendCalendar stock_data={processedStockData} />

方案2：用useEffect监听原始数据变化

如果需要保留原始API数据，可以声明两个状态变量，监听原始数据更新后再处理：

const [rawStockData, setRawStockData] = useState([]);
const [processedStockData, setProcessedStockData] = useState([]);

const makeMyNewData = () => {
  const processedData = rawStockData.map(item => {
    const [first, rest, end] = item.Purpose.split("-");
    return {
      short_name: item.short_name,
      long_name: item.long_name,
      div_or_share: first.trim(),
      Ex_date: item.Ex_date,
      div_amount: isNaN(Number(end)) 
        ? "-" 
        : `Rs. ${Number(end).toFixed(2)}`
    };
  });
  setProcessedStockData(processedData);
};

const fetch_BSE_Data = () => {
  fetch("https://api.bseindia.com/BseIndiaAPI/api/DefaultData/w?Fdate=20220912&Purposecode=P9&TDate=20221216&ddlcategorys=E&ddlindustrys=&scripcode=&segment=0&strSearch=S")
    .then(response => response.json())
    .then(data => setRawStockData(data));
};

useEffect(() => {
  fetch_BSE_Data();
}, []);

// 监听原始数据变化，自动触发处理逻辑
useEffect(() => {
  if (rawStockData.length > 0) {
    makeMyNewData();
  }
}, [rawStockData]);

<DividendCalendar stock_data={processedStockData} />

子组件状态初始化不更新的修复 #

useState(props.stock_data)只会在组件首次渲染时读取props的值，后续props变化不会自动同步到状态中。需要用useEffect监听props的变化，手动更新状态：

const DividendCalendar = ({ stock_data }) => {
  const [div_cal_data, setDivCalData] = useState(stock_data);

  // 监听props变化，同步更新状态
  useEffect(() => {
    setDivCalData(stock_data);
  }, [stock_data]);

  console.log("div_cal_data", div_cal_data);
  // 组件其他逻辑...
};

额外注意点 #

• 处理Purpose分割后的字符串时，记得用trim()去除多余空格，避免div_or_share字段带无效空格。
• 避免直接修改或覆盖原始API数据，拆分状态能让逻辑更清晰，也方便后续调试和扩展。

内容的提问来源于stack exchange，提问作者Kanchan Bharti