Reactjs 显示React中的项目列表

我有一个简单的购物清单组件来显示状态中的项目

我如何使用ul列表进行此操作

这是我的密码

我在items.map上发现错误，它说它需要一个

：

import React, {Component} from 'react'
import uuid from 'uuid';

class ShoppingList extends Component {
    state = {
        items:[
            {id: uuid(), name: 'Eggs'},
            {id: uuid(), name: 'Bacon'},
            {id: uuid(), name: 'Beans'},
            {id: uuid(), name: 'Black Pudding'}
        ]
    }

    render(){
        const {items} = this.state;

        return(
            <button
                onClick={() =>{
                    const name = prompt('Enter Item');
                    if(name){
                        this.setState(state => ({
                            items: [...state.items, {id: uuid(), name}]
                        }));
                    }
                }}
            >
                Add Item
            </button>
            <ul>
                {items.map(({id,name}) => (
                    <li key={id}>
                        {name}
                    </li>
                ))}
            </ul>
        )
    }
}

export default ShoppingList

import React，{Component}来自“React”
从“uuid”导入uuid；
类ShoppingList扩展组件{
状态={
项目：[
{id:uuid（），名称：'egs'}，
{id:uuid（），名称：'Bacon'}，
{id:uuid（），名称：'Beans'}，
{id:uuid（），名称：'Black Pudding'}
]
}
render（）{
const{items}=this.state；
返回(
{
const name=prompt（'Enter Item'）；
如果（姓名）{
this.setState（state=>({
items:[…state.items，{id:uuid（），name}]
}));
}
}}
>
添加项

{items.map（{id，name}）=>(

{name}

))}

)
}
}
导出默认购物列表
< /代码> 如果这是你的输出（除非你已经修剪了），请考虑以下内容：


将内容包装在
中，因为
呈现
只能呈现一个根元素

将onClick内容移到它的方法之外，这是一种普遍接受的方法

您的输出现在可能如下所示

import React, { Component, Fragment } from 'react';
import uuid from 'uuid';

class ShoppingList extends Component {
    state = {
        items: [
            { id: uuid(), name: 'Eggs' },
            { id: uuid(), name: 'Bacon' },
            { id: uuid(), name: 'Beans' },
            { id: uuid(), name: 'Black Pudding' }
        ]
    };

    buttonClicked = () => {
        const name = prompt('Enter item');
        if (name) {
            this.setState(state => ({
                items: [...state.items, { id: uuid(), name }]
            }));
        }
    };

    render() {
        const { items } = this.state;

        return (
            <Fragment>
                <button onClick={this.buttonClicked}>Add Item</button>
                <ul>
                    {items.map(({ id, name }) => (
                        <li key={id}>{name}</li>
                    ))}
                </ul>
            </Fragment>
        );
    }
}

import React，{Component，Fragment}来自'React'；
从“uuid”导入uuid；
类ShoppingList扩展组件{
状态={
项目：[
{id:uuid（），名称：'egs'}，
{id:uuid（），名称：'Bacon'}，
{id:uuid（），名称：'Beans'}，
{id:uuid（），名称：'Black Pudding'}
]
};
按钮点击=（）=>{
const name=prompt（'Enter item'）；
如果（姓名）{
this.setState（state=>({
items:[…state.items，{id:uuid（），name}]
}));
}
};
render（）{
const{items}=this.state；
返回(
添加项

{items.map（{id，name}）=>(
{name}
))}

);
}
}

请运行这个，让我知道它是否有效

如果这是你的输出（除非你把它修好了），考虑下面的内容：

将内容包装在
中，因为
呈现
只能呈现一个根元素

将onClick内容移到它的方法之外，这是一种普遍接受的方法

您的输出现在可能如下所示

import React, { Component, Fragment } from 'react';
import uuid from 'uuid';

class ShoppingList extends Component {
    state = {
        items: [
            { id: uuid(), name: 'Eggs' },
            { id: uuid(), name: 'Bacon' },
            { id: uuid(), name: 'Beans' },
            { id: uuid(), name: 'Black Pudding' }
        ]
    };

    buttonClicked = () => {
        const name = prompt('Enter item');
        if (name) {
            this.setState(state => ({
                items: [...state.items, { id: uuid(), name }]
            }));
        }
    };

    render() {
        const { items } = this.state;

        return (
            <Fragment>
                <button onClick={this.buttonClicked}>Add Item</button>
                <ul>
                    {items.map(({ id, name }) => (
                        <li key={id}>{name}</li>
                    ))}
                </ul>
            </Fragment>
        );
    }
}

import React，{Component，Fragment}来自'React'；
从“uuid”导入uuid；
类ShoppingList扩展组件{
状态={
项目：[
{id:uuid（），名称：'egs'}，
{id:uuid（），名称：'Bacon'}，
{id:uuid（），名称：'Beans'}，
{id:uuid（），名称：'Black Pudding'}
]
};
按钮点击=（）=>{
const name=prompt（'Enter item'）；
如果（姓名）{
this.setState（state=>({
items:[…state.items，{id:uuid（），name}]
}));
}
};
render（）{
const{items}=this.state；
返回(
添加项

{items.map（{id，name}）=>(
{name}
))}

);
}
}

请运行这个，让我知道它是否有效

这里只需要一个顶级JSX元素。请参阅我添加的额外div

编辑
我想指出@cr05s19xx关于提取onClick处理程序的答案。使用这种逻辑是一种良好的行为。另外，如果extra
div
破坏了一些CSS，那么您可以按照@cr05s19xx的建议再次使用
React.Fragment
。所以，另一个答案可能比我的更好：）


class ShoppingList扩展了React.Component{
状态={
项目：[
{id:1，名字：“蛋”}，
{id:2，名字：“Bacon”}，
{id:3，名称：“Beans”}，
{id:4，名字：“黑布丁”}
]
};
render（）{
const{items}=this.state；
返回(
{
常量名称=提示（“输入项”）；
如果（姓名）{
this.setState（state=>({
items:[…state.items，{id:uuid（），name}]
}));
}
}}
>
添加项

{items.map（{id，name}）=>(
{name}
))}

);
}
}
ReactDOM.render(
,
document.getElementById（“根”）
);
您只需要一个顶级JSX元素就可以了。请参阅我添加的额外div

编辑
我想指出@cr05s19xx关于提取onClick处理程序的答案。使用这种逻辑是一种良好的行为。另外，如果extra
div
破坏了一些CSS，那么您可以按照@cr05s19xx的建议再次使用
React.Fragment
。所以，另一个答案可能比我的更好：）


class ShoppingList扩展了React.Component{
状态={
项目：[
{id:1，名字：“蛋”}，
{id:2，名字：“Bacon”}，
{id:3，名称：“Beans”}，
{id:4，名字：“黑布丁”}
]
};
render（）{
const{items}=this.state；
返回(
{
常量名称=提示（“输入项”）；
如果（姓名）{
this.setState（state=>({
items:[…state.items，{id:uuid（），name}]
}));
}
}}
>
添加项