呈现列表时使用 React 和 Axios 出现错误 #152

Question

我正在尝试在网页上添加使用 axios Ajax 获取通知列表的反应组件。

我收到错误 #152，它告诉我我没有渲染任何内容。但是当我在 renderItems 中（在地图循环内）控制台记录通知时，我可以看到我期望的通知。

这是我的代码：

'use strict';
const e = React.createElement;

const NofiticationSingle = ({item}) => {
    <li>
        <p>
            {item}
        </p>
    </li>
}

class Notifications extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            notifications : [],
        }
    }

    componentDidMount() {
        const url = ajax_object.url;
        let data = {action: 'get_notifications'};
        let currentComponent = this;
        axios.post(url, Qs.stringify(data))
            .then(function (response) {
                let data = response.data;
                currentComponent.setState({
                    notifications : data.notifications
                })
            })
            .catch(function (error) {
                console.log(error);
            });

    }

    renderItems(){
        return this.state.notifications.map((notification) => (
                <NofiticationSingle key={notification.id} notification={notification} />
        ))
    }

    render(){
        return (
            <ul>
                {this.renderItems()}
            </ul>
        )
    }
}

const notificationsDomContainer = document.querySelector('#goes');
ReactDOM.render(e(Notifications), notificationsDomContainer);

Answer 1

哦，您在这里缺少 return 语句，或者您有额外的 {} 括号：

const NofiticationSingle = ({item}) => {
    <li>
        <p>
            {item}
        </p>
    </li>
}

您应该引入显式的 return 语句，或者用方括号括起您的结果，例如：

const NofiticationSingle = ({item}) => {
    return <li>
        <p>
            {item}
        </p>
    </li>;
})
---
const NofiticationSingle = ({item}) => (
    <li>
        <p>
            {item}
        </p>
    </li>
)

呈现列表时使用 React 和 Axios 出现错误 #152

Getting error #152 with React and Axios when rendering a list

setstate

reactjs

axios