这个问题我碰到过好多次啦，核心原因其实是初始渲染时你的product或者harga还没被赋值——虽然控制台里console.log(this.state.product)能看到数据，但那是浏览器控制台的“小陷阱”：它会动态更新对象的引用，显示的是后续state更新后的值，而代码执行那一刻，product可能还是undefined或者null，直接访问嵌套属性自然会报错。

下面给你几个实用的解决方法：

1. 给state设置合理的初始默认值 #

在组件初始化state时，给product和嵌套的harga预设空结构，确保每个层级都存在，避免访问不存在的属性：

class YourComponent extends React.Component {
  state = {
    product: {
      harga: {
        produk: '' // 也可以根据数据类型设0、null等默认值
      }
    }
  };

  // ...其他业务代码
}

2. 使用可选链操作符（最推荐） #

ES2020引入的可选链?.可以完美解决嵌套属性访问的报错问题：只要中间某一层是undefined或null，就会直接返回undefined而不抛出错误，写法简洁又安全：

console.log(this.state.product?.harga?.produk);

现在React项目基本都支持这个语法（旧项目如果不支持，只需配置Babel插件即可）。

3. 手动添加条件判断 #

如果不想用新语法，可以在访问前先检查每一层是否存在：

const { product } = this.state;
// 确保product和harga都存在后再访问
if (product && product.harga) {
  console.log(product.harga.produk);
}
// 或者用三元表达式处理无数据的情况
console.log(product && product.harga ? product.harga.produk : '暂无数据');

4. 处理异步加载的情况 #

如果product是通过API请求等异步方式获取的，记得先判断数据是否加载完成：

class YourComponent extends React.Component {
  state = {
    product: null,
    isLoading: true
  };

  componentDidMount() {
    // 模拟API请求
    fetch('/your-api-url')
      .then(res => res.json())
      .then(data => {
        this.setState({ product: data, isLoading: false });
      })
      .catch(err => console.error(err));
  }

  render() {
    const { product, isLoading } = this.state;
    if (isLoading) {
      return <div>加载中...</div>;
    }
    // 这里可以安全访问嵌套属性了
    console.log(product.harga.produk);
    return <div>商品价格：{product.harga.produk}</div>;
  }
}

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