javascript - 使用 React JS 在页面上渲染元素

Question

迈出我在 React 中的第一步。请帮助显示这部分:

{
  incidents.forEach(incidents => {
    incidents.map(inc =>{
      return (
        <div key={inc.id} className='inc'>
          <div className='incDescr'>Description: {inc.title}</div>
        </div>
      )
    })
  })
}

在下面的代码中。

import React from 'react';

const api_url = 'http://localhost:8080';
const errorHandler = error => this.setState({ error, isLoading: false });

class AllIncidents extends React.Component{

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

    getIncidents() {
        fetch(api_url + '/incident/')
            .then(res => res.json())
            .then(data => this.setState({
                    incidents: [data],
                    isLoading: false
                })
            ).catch(errorHandler);
    }

    componentDidMount() {
        this.getIncidents();
    }

    render() {
        const { incidents, error } = this.state;
        return (
            <React.Fragment>
                <h1>All Incidents</h1>
                {error ? <p>{error.message}</p> : null}

                {
                    incidents.forEach(incidents => {
                        incidents.map(inc =>{
                            return (
                                <div key={inc.id} className='inc'>
                                    <div className='incDescr'>Description: {inc.title}</div>
                                </div>
                            )
                        })
                    })
                }
            </React.Fragment>
        );
    }
}
export default AllIncidents;

后台响应:

[{"id":"5d923ecd9a65603e8bd1022f","title":"Incident 6","description":null,"status":null},{"id":"5d923fc49a65603e8bd10230","title":"Incident 6","description":null,"status":null},{"id":"5d923fc79a65603e8bd10231","title":"Incident 6","description":null,"status":null},{"id":"5d923fc89a65603e8bd10232","title":"Incident 6","description":null,"status":null},{"id":"5d923fc99a65603e8bd10233","title":"Incident 6","description":null,"status":null},{"id":"5d923fca9a65603e8bd10234","title":"Incident 6","description":null,"status":null},{"id":"5d923fcb9a65603e8bd10235","title":"Incident 6","description":null,"status":null},{"id":"5d923fcc9a65603e8bd10236","title":"Incident 6","description":null,"status":null},{"id":"5d923fcd9a65603e8bd10237","title":"Incident 6","description":null,"status":null},{"id":"5d923fcd9a65603e8bd10238","title":"Incident 6","description":null,"status":null},{"id":"5d923fce9a65603e8bd10239","title":"Incident 6","description":null,"status":null},{"id":"5d923fcf9a65603e8bd1023a","title":"Incident 6","description":null,"status":null},{"id":"5d923fd09a65603e8bd1023b","title":"Incident 6","description":null,"status":null},{"id":"5d923fd19a65603e8bd1023c","title":"Incident 6","description":null,"status":null},{"id":"5d923fd19a65603e8bd1023d","title":"Incident 6","description":null,"status":null},{"id":"5d923fd29a65603e8bd1023e","title":"Incident 6","description":null,"status":null},{"id":"5d923fd39a65603e8bd1023f","title":"Incident 6","description":null,"status":null},{"id":"5d923fd39a65603e8bd10240","title":"Incident 6","description":null,"status":null},{"id":"5d923fd49a65603e8bd10241","title":"Incident 6","description":null,"status":null},{"id":"5d923fd59a65603e8bd10242","title":"Incident 6","description":null,"status":null},{"id":"5d923fd59a65603e8bd10243","title":"Incident 6","description":null,"status":null},{"id":"5d923fd69a65603e8bd10244","title":"Incident 6","description":null,"status":null},{"id":"5d923fd79a65603e8bd10245","title":"Incident 6","description":null,"status":null},{"id":"5d923fd79a65603e8bd10246","title":"Incident 6","description":null,"status":null}]

Answer 1

您正在遍历您的数组两次，请尝试删除 incidents.forEach 以便代码如下所示:

{incidents.map(inc => (
  <div key={inc.id} className='inc'>
    <div className='incDescr'>Description: {inc.title}</div>
  </div>
))}

编辑:要解决无法读取 setState of undefined 的问题，您需要绑定(bind)您的函数。将您的 fetch 方法定义为箭头函数应该可以解决问题。或者，您可以在构造函数中绑定(bind)该函数。

getIncidents = () => {
  fetch(api_url + '/incident/')
    .then(res => res.json())
    .then(data => this.setState({
      incidents: data,
      isLoading: false
    }))
    .catch(errorHandler);
}