屏幕上没有结果

Question

此代码不适用于 React

localhost 3000

。我尝试过很多方法。

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

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

export default Counter;

我多次尝试运行该代码，但没有成功。

我已经多次遇到这个问题并再次启动页面，它可以工作，但这次没有答案。

Answer 1

您应该将当前类重命名为“Counters”（或适合所有计数器父级的名称），并在另一个文件中创建一个名为 Counter 的类，该类仅呈现一个表示 Counter 的元素。

正如注释中所解释的，在 Counter 类中渲染元素会生成递归循环，这就是它不显示任何内容的原因。如果您在另一个类中渲染 Counter 元素，这个问题就可以解决。

照原样，对于您尝试渲染的每个计数器，程序会尝试渲染 5 个不同的计数器。