React localhost 3000页面无结果，Counter组件代码运行失败求助

核心问题点 #

• key值重复：state.counters里所有对象的id都是1，React列表的key必须唯一，重复的key会导致React无法正确识别列表项，引发渲染异常。
• 无限递归渲染：你在Counter组件的render方法里又渲染了<Counter />组件，这会触发无限递归调用，最终导致页面无法正常渲染（浏览器会因栈溢出终止渲染）。
• 组件无内容输出：当前Counter组件没有渲染任何实际可见内容，就算递归问题解决，页面也看不到结果。

修复后的代码示例 #

import React, { Component } from 'react';

// 拆分单个计数器组件，避免递归
class SingleCounter extends Component {
  render() {
    return <div>计数器值：{this.props.value}</div>;
  }
}

class Counter extends Component {
  state = {
    counters: [
      { id: 1, value: 0 },
      { id: 2, value: 0 },
      { id: 3, value: 0 },
      { id: 4, value: 0 },
      { id: 5, value: 0 }
    ]
  };

  render() {
    return (
      <div>
        {this.state.counters.map(counter => (
          <SingleCounter key={counter.id} value={counter.value} />
        ))}
      </div>
    );
  }
}

export default Counter;

修复说明 #

1. 唯一key值：给每个counter对象分配了唯一的id，确保React能正确追踪列表项的变化。
2. 打破递归循环：拆分出SingleCounter组件负责单个计数器的渲染逻辑，父Counter组件只处理列表渲染，避免无限递归。
3. 添加可见内容：SingleCounter组件接收value属性并渲染出来，页面就能显示实际的计数器内容。

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