Question

对于我的项目，我试图遍历数组以动态创建复选框，但是我犯了一个愚蠢的错误，似乎无法使用我的函数...我确定我在语法上是错误的，但是我不能似乎找到了纠正我的错误的资源。我在做什么错了？

我的功能

   createBoxes(boxArray) {
        const checkboxArray = []
        for(var i = 0; i < boxArray; i++){
           checkboxArray.push(<Checkbox
                key={i}
                className="madeBoxes"
                endpointValue={this.state.endpointValue}
                handleChange={this.handleChange}
                handleCheck={this.handleCheck}
                label={labels[i]}
                />)
                console.log(checkboxArray)
    }
    return checkboxArray
}

我的渲染功能一直到功能输入点为止

render() {
        return (
        <div className="search_content">
        <div className="search_wrapper">
        <form onSubmit={this.handleSubmit} method="#">
        <label>
                <input type="text" className="search_bar" value={this.state.searchValue} onChange={this.handleChange} />
            </label>
            <div>
                <input type="submit" className="search_button" value="May the Force be with you." onClick={() =>  this.props.searchWithApi(APIQuery + this.state.endpointValue + this.state.searchValue)}/>
            </div>
        </form> 

        </div>

         <div className="checkboxes">  
         {this.createBoxes(this.labels)}

Answer 1

似乎您正在将this.labels传递给createBoxes作为boxArray的值，但随后在函数中引用了labels[i]。应该改为boxArray[i]吗？另外，如果for(var i = 0; i < boxArray.length; i++)将成为数组，则for循环应为boxArray。

Answer 2

在忘记了这个SO之后，我最终得出了一个结论。我改变了它们的创建方式。

createBoxes() {
const checkboxArray = [];
searchLabels.map(item => checkboxArray.push(
  <Checkbox
    key={item}
    className="madeBoxes"
    subKey={item}
    endpointValue={this.state.endpointValue}
    handleChange={e => this.handleChange(e)}
    handleCheck={e => this.handleCheck(e)}
    label={item}
  />,
));
return checkboxArray;

}

使用复选框名称数组动态创建复选框

2 个答案: