javascript - 如何避免渲染复选框编号？

Question

我正在尝试根据表单中的复选框创建一个以逗号分隔的饮食限制列表。我设法制作了一个以逗号分隔的列表，但我找不到一种方法来阻止应用程序在单击复选框时呈现数字。请看下面:

class App extends Component {
    constructor() {
        super()
        this.state = {
            firstName: "",
            lastName: "",
            age: "",
            gender: "",
            destination: "",
            dietaryRestrictions: {
                isVegan: false,
                isKosher: false,
                isLactoseFree: false
            }
        }
        this.handleChange = this.handleChange.bind(this)
    }

{…更多代码..}

render() {
        const dietR = []
        return (
            <main>

{…更多代码..}

[Your dietary restrictions: 
                    {this.state.dietaryRestrictions.isKosher ? dietR.push("Kosher"):null}
                    {this.state.dietaryRestrictions.isLactoseFree ? dietR.push("Lactose-Free"):null}
                    {this.state.dietaryRestrictions.isVegan ? dietR.push("Vegan"):null}
                <p>{dietR.join(", ")}</p>
            </main>
        )

请注意屏幕截图中“dietaryRestrictions”后面的“123”

Answer 1

问题出在你的渲染方式上:

{this.state.dietaryRestrictions.isLactoseFree ? dietR.push("Lactose-Free"):null}

例如，

dietR.push("Lactose-Free") 将返回数组的长度。所以你可以在这里看到，因为你推送一个项目，你得到长度1，然后你推送另一个，所以现在你有长度2，然后另一个，所以你得到长度3，所以这就是你得到123<的原因。因此，我不会在渲染中更改数组时执行业务逻辑，而是在渲染外部创建一个方法来执行此操作。

你可以说:

const getDietaryRestrictions = () => {
    const dietR = []   
    if(this.state.isKosher)
        dietR.push("Kosher");
    if(this.state.isLactoseFree)
        dietR.push("Lactose-Free");
    if(this.state.isVegan)
        dietR.push("Vegan");
    return dietR;
}

然后你就可以拥有

<p>{this.getDietaryRestrictions().join(", ")}</p>