ReactJS新手求助：Fetch JSON数据无法展示及组件传值实现产品查询

嘿，我来帮你一步步搞定这两个问题！先从修复当前组件的展示问题说起，再实现父组件传值查询的功能。

一、修复Products组件的数据展示问题 #

你的代码里有几个关键问题导致数据没法正常展示，我一一给你指出来并修复：

1. State命名不匹配：你初始化state是{ posts: {} }，但fetch后却把响应存在了res属性里，最后render又去取postItems——这三个名字完全对不上，React当然找不到数据！
2. 使用废弃的生命周期：componentWillMount已经被React废弃了，推荐用componentDidMount来发起网络请求，它会在组件挂载完成后执行，更安全可靠。
3. 直接渲染对象：JSX不能直接渲染对象，你需要把对象里的具体属性（比如IDPRODUCT和DESCRIPTION）提取出来展示。

修复后的Products组件代码：

import React, { Component } from 'react'; 

class Products extends Component { 
  constructor(props){ 
    super(props); 
    // 初始化state为null，更清晰表示初始无数据，同时添加错误状态
    this.state = { product: null, error: null }; 
  }; 

  componentDidMount() {
    // 组件挂载后发起请求
    this.fetchProduct(this.props.productId);
  }

  // 封装请求逻辑，方便后续复用
  fetchProduct = (productId) => {
    if (!productId) return; // 空ID不发起无效请求
    fetch(`http://localhost:3000/product/${productId}`) 
      .then(res => {
        if (!res.ok) throw new Error('请求失败，请检查产品ID是否正确');
        return res.json();
      })
      .then(product => { 
        this.setState({ product, error: null }); 
      }) 
      .catch(error => { 
        console.error(error);
        this.setState({ error: error.message, product: null });
      }); 
  }

  render() { 
    const { product, error } = this.state;

    // 处理不同状态：错误、加载中、有数据
    if (error) return <div className="error-message">出错了：{error}</div>;
    if (!product) return <div className="loading">加载中...</div>;

    return ( 
      <div className="product-card">
        <h3>产品ID：{product.IDPRODUCT}</h3>
        <p>产品描述：{product.DESCRIPTION}</p>
      </div>
    ); 
  } 
} 

export default Products;

二、实现App.js传值查询功能 #

接下来我们在App.js里添加输入框，让用户输入产品ID，然后把ID传给Products组件触发查询：

1. App.js代码实现 #

我们把App做成受控组件，维护用户输入的产品ID，然后把这个ID作为props传给Products：

import React, { Component } from 'react';
import Products from './Products'; // 引入Products组件

class App extends Component {
  constructor(props) {
    super(props);
    this.state = { 
      inputProductId: '',
      currentProductId: '' // 存储当前要查询的产品ID
    };
  }

  handleInputChange = (e) => {
    // 实时更新输入框的state
    this.setState({ inputProductId: e.target.value });
  }

  handleSearch = () => {
    // 简单的输入验证：非空且为数字
    const trimmedId = this.state.inputProductId.trim();
    if (trimmedId && !isNaN(trimmedId)) {
      this.setState({ currentProductId: trimmedId });
    } else {
      alert('请输入有效的数字产品ID');
    }
  }

  render() {
    return (
      <div className="app-container">
        <div className="search-bar">
          <input
            type="text"
            placeholder="输入产品ID查询"
            value={this.state.inputProductId}
            onChange={this.handleInputChange}
          />
          <button onClick={this.handleSearch}>查询产品</button>
        </div>
        {/* 把当前要查询的ID传给Products组件 */}
        <Products productId={this.state.currentProductId} />
      </div>
    );
  }
}

export default App;

2. 给Products组件添加props监听 #

现在Products需要在productId变化时重新发起请求，所以要添加componentDidUpdate生命周期：
在Products组件里添加：

componentDidUpdate(prevProps) {
  // 当props里的productId变化时，重新请求对应数据
  if (prevProps.productId !== this.props.productId) {
    this.fetchProduct(this.props.productId);
  }
}

这样当用户在App的输入框输入ID并点击查询后，Products就会自动请求对应ID的产品数据并展示了！

额外小提示 #

• CORS问题：如果你的后端API和React前端端口不同（比如后端是3001，前端是3000），可能会遇到跨域问题，需要在后端配置CORS，或者在React开发时用代理（在package.json里加"proxy": "http://localhost:3000"）。
• 加载状态优化：可以给fetch请求加一个loading状态，让用户更直观地知道正在请求中。
• 样式美化：可以给各个元素添加类名，自定义CSS样式提升页面美观度。

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