javascript - 在 React 中完全渲染组件返回的组件

Question

我正在创建一个应用程序，我需要多次渲染一个表单元素，其中一些变量名称发生了变化。不幸的是，我遇到了一些问题，并非所有代码都从组件返回。我删除了一些变量声明以使其更易于阅读。

主要成分

export default function StrengthLog() {
   
    return (
        <Container id="strengthContainer">
            <SelectMovements />
            <Form>
            {
                movement.map(movement => {
                    const checked = movement[1].triggered
                    if (checked){
                        return <StrengthForm props={movement}/>
                    }
                })
            }
            <Button content='submit'>Submit</Button>
            </Form>
        </Container>
    )
}

被退回的组件

export default function StrengthForm({props}) {
    return (
        <div>
            <h1>Hello!</h1>
                {               
                    props[1].triggered
                    ? (
                        setsArray.map(item => {
                            return <Group widths='equal'>
                            <Select fluid label='Reps' placeholder='Select Reps' options={repOptions} name={`${liftVarName}-rep-1`}/>
                            <Input fluid placeholder='Enter Weight' label='Weight' name={`${liftVarName}-weight-1`}/>
                            <Button className="addSet">+</Button>
                            <Button className="deleteSet">x</Button>
                            </Group>
                        })
                    )
                    : console.log('Thing')
                 }
        </div>
    )
}

发生的事情是它返回了<h1>ofStrengthForm但它没有返回花括号中包含的其他信息。

标签： javascriptreactjssemantic-uisemantic-ui-react

Answer 1

问题是我在控制台中声明setsArray了const setsArray = new Array(props[1].sets)这给了我。StrengthForm.js:9 (4) [empty × 4]我怀疑是因为该数组实际上没有我需要在那里添加一些内容的内容，所以我评论了我的初始声明并改为这样做。

    const setsArray = (() => {
        const emptyArray = []
        for(let i = 0; i <= props[1].sets; i++) {
            emptyArray.push(' ');
        }
        return emptyArray;
    })();

    return (
        <div>
            <h1>Hello!</h1>
                {               
                    props[1].triggered
                    ? (
                        setsArray.map(() => {
                            return <>
                            <Group widths='equal'>
                            <Select fluid label='Reps' placeholder='Select Reps' options={repOptions} name={`${liftVarName}-rep-1`}/>
                            <Input fluid placeholder='Enter Weight' label='Weight' name={`${liftVarName}-weight-1`}/>
                            <Button className="addSet">+</Button>
                            <Button className="deleteSet">x</Button>
                            </Group>
                            </>
                        })
                        
                    )
                    : console.log('Thing')
                 }
        </div>
    )

我把它改成这个后，一切都弹出来了！