Question

我正在构建一个小型琐事应用程序，并尝试为每个问题插入一个更新的“选择”元素数组，但是当我尝试插入一个JSX元素数组时，该数组连续显示为空白，而我没有知道原因：

let choices = [];

const generateChoices = (answers) => {

        for(let i = 0; i < answers.length; i++){
            choices.push(<ChoiceButton key={answers[i]} value={answers[i]} clicked={(answer) => setSelectedAnswer(decodeURIComponent(answer))}>{answers[i]}</ChoiceButton>);
        };

    };

generateChoices(["One", "Two", "Three", "Four"]);

<BoxWrapper>
...
<Fragment>
     <ChoiceForm>
     {choices}
     <SubmitButton isDisabled={!selectedAnswer} clicked={(e) => {e.preventDefault(); checkAnswer();}}>Submit</SubmitButton>
     </ChoiceForm>
</Fragment>
...
</BoxWrapper>

从ChoiceButton.js：

const ChoiceButton = props => {

    return (<Fragment>
                <ChoiceRadio type="radio" id={props.value} name="choice" onClick={() => props.clicked(props.value)}/>
                <ChoiceLabel htmlFor={props.value} correct={props.correct}>{props.children}</ChoiceLabel>
            </Fragment>
    )
}

据我所知，如果我做console.log(choices)，则表明我在那里有4个JSX元素，但是该数组在React Debugger中显示为空白。我该如何解决？

Answer 1

我认为您需要遍历数组。尝试做

{choices.map(choice=>choice)}

类似的东西。基本上，应该通过遍历数组来一一呈现它们。

为什么我的JSX元素数组不会出现在我的reactjs渲染中？

1 个答案: