Javascript 使用按钮增加react中的div

我还没来得及做出反应，我有一个简短的问题

我正在尝试创建一个按钮，它将实时增加div的数量

这是我的密码：

import React from 'react'


const Clown = () => {

    const [clownCounter, setClownCounter] = React.useState(1);

    function addClown(event) {
        event.preventDefault();
    }
    
    return(
        <React.Fragment>
        <div>
            <form>
                 
                {Array.from({ length: clownCounter}, (_unused, index) => index + 1).map(
                    (clownIndex) => {
                        const clownid = `${clownIndex}`
                        return (
                        <div key={clownid } className="clown-box">
                            <label htmlFor={clownid }>Activity {clownIndex}</label>
                            <br />
                            <input type="text" onChange={(e)=> onChangeForm(e)} name={activityId} id={activityId} />
                            <br />
                        </div>
                        )
                    },
                )}
                <span className="clown-add">
                    <button onClick={addClown} onChange={() => { setClownCounter(clownCounter++) }}>Add Clown</button>
                </span>   
                <br />  
            </form>
        </div>
        </React.Fragment>
    )
}
export default Clown

从“React”导入React
康斯特小丑=（）=>{
常量[小丑计数器，设置小丑计数器]=React.useState（1）；
功能添加小丑（事件）{
event.preventDefault（）；
}
返回(
{Array.from（{length:counter}，（_unused，index）=>index+1）.map(
（索引）=>{
常量丑角ID=`${丑角索引}`
返回(
活动{index}


onChangeForm（e）}name={activityId}id={activityId}/>


)
},
)}
{设置小丑计数器（小丑计数器++）}>添加小丑


)
}
导出默认小丑

正如您所见，目标是每次单击按钮时增加小丑盒div的数量。我想我已经很接近了，但它目前不起作用。有人能帮忙吗？

编辑：本以为问题是由数组引起的。从，但事实并非如此。我删除了那个部分，但保留了这个示例，因为OP可能会发现它很有用

const{useState}=React；
康斯特小丑=（{title}）=>{
常量[小丑计数器，设置小丑计数器]=React.useState（1）；
返回(
设置小丑计数器（小丑计数器+1）}>
加小丑
{Array.from（{length:choorcounter}，（_unused，index）=>index+1）.map（（e，i）=>(
{`小丑#${i+1}}
))}
);
};
render（，document.getElementById（“react”）
小丑{display:flex；flex-direction:column；}
h4{页边距底部：5px；}
您的代码很少有这种小错误

首先，在map函数中的return语句后面有一个额外的逗号（，）

其次，您正在更新按钮中
onChange
事件的状态计数器，这是不正确的。您应该在单击时更新它，并防止单击按钮时表单提交的默认行为，或者您可以将按钮类型定义为
type=“button”

最后，您需要定义onChangeForm函数


const小丑=（）=>{
常量[小丑计数器，设置小丑计数器]=React.useState（1）；
函数onChangeForm（）{
}
功能添加小丑（事件）{
event.preventDefault（）；
设置计数器（prev=>prev+1）；
}
控制台日志（计数器）；
返回(
{Array.from（{length:counter}，（_unused，index）=>index+1）.map(
（索引）=>{
常量小丑ID=`${小丑索引}`；
返回(
活动{index}


onChangeForm（e）}name={'activityId'}id={'activityId'}/>


)
})
}
加小丑


)
}
ReactDOM.render（，document.getElementById（'app'））
数组。from（{length:小丑计数器}
没有做你期望的事情。
数组。from（{length:小丑计数器}，（_unused，index）=>index+1）
返回一个包含元素[1到小丑计数器]的数组，感谢你指出@ShubhamKhatri，这是我的新方法。