React中axios.get获取数据后实现商品名首字母大写功能

实现逻辑 #

你已经完成了首字母大写的工具函数capitalizeFirstLetter，只需要在点击按钮时定位到对应商品，按React不可变数据要求更新商品列表状态即可，无需操作DOM或使用ref。

具体修改点 #

• 重构capHandler方法：接收目标商品ID作为参数，通过map遍历原商品列表，匹配到对应ID的商品时，返回拷贝的新商品对象，将name字段替换为首字母大写后的结果，其余商品保持不变，最终用新数组更新products状态触发重渲染
• 调整Capitalize按钮的点击事件绑定，传入当前商品的id作为capHandler的入参，和现有Clear按钮的传参逻辑保持一致
• 移除无用的productNameRef相关代码：列表渲染场景下多个元素绑定同一个ref会导致ref始终指向最后一个渲染项，当前功能完全不需要使用ref

可直接运行的完整代码 #

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

function App(){
  const url = 'https://course-api.com/react-store-products';

  const [products, setProducts] = useState([]);

  const fetchData = async () => {
    const { data } = await axios.get(url);
    setProducts(data);
  };

  const clearProducts = () => {
    setProducts([]);
  };

  const clearSingleProduct = (productID) => {
    const filteredArray = products.filter((item) => item.id != productID);
    setProducts(filteredArray);
  };

  function capitalizeFirstLetter(string) {
    if (!string) return '';
    return string.charAt(0).toUpperCase() + string.slice(1);
  }

  function capHandler(productID) {
    const updatedProducts = products.map(product => {
      if (product.id === productID) {
        return {
          ...product,
          name: capitalizeFirstLetter(product.name)
        }
      }
      return product;
    })
    setProducts(updatedProducts);
  }

  return (
    <>
      <button onClick={fetchData}>Fetch Products</button>
      <button onClick={clearProducts}>Clear Products</button>
      <div>
        {products.map((product) => {
          return (
            <div id={product.id} key={product.id}>
              <h3 className="productName">{product.name}</h3>
              <button onClick={() => clearSingleProduct(product.id)}>
                Clear
              </button>
              <button onClick={() => capHandler(product.id)}>Capitalize</button>
            </div>
          );
        })}
      </div>
    </>
  );
};

export default App;

额外优化：给首字母大写函数增加了空值兼容，避免接口返回异常空名称时触发JS报错；所有状态更新均生成新的引用，符合React状态更新规范，不会出现点击后视图不刷新的问题。

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