Ошибка типа: не удается прочитать свойство 'name' со значением NULL Springboot + Reactjs + MySQL

Question

У меня возникли проблемы с отображением (отображением) существующих кортежей в моей локальной базе данных mysql на моем внешнем интерфейсе (Reactjs). Я получаю следующую ошибку: «TypeError: Невозможно прочитать свойство 'name' из null".

Я мог отображать эти записи в прошлом, поэтому я знаю, что я близок, но потратил весь день на то, чтобы показать только существующие записи, которые будут отображаться в представлении, и поэтому надеюсь на какое-то руководство , Я не очень знаком с reactjs, поэтому я чувствую, что проблема может находиться где-то на этом конце. Я могу успешно запросить базу данных через терминал и увидеть соответствующие отзывы. Любая информация будет принята с благодарностью!

ReviewList. js (реакция просмотра):

import React, { Component } from 'react';
import { Button, ButtonGroup, Container, Table } from 'reactstrap';
import AppNavbar from './AppNavbar';
import { Link } from 'react-router-dom';

class ReviewList extends Component {

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

  }

  componentDidMount() {
    this.setState({isLoading: true});

    fetch('api/reviews')
      .then(response => response.json())
      .then(data => this.setState({reviews: data, isLoading: false}));
  }

  render() {
    const {reviews, isLoading} = this.state;

    if (isLoading) {
      return <p>Loading...</p>;
    }

    const reviewList = reviews.map(review => {
      const rev = `${review.name} ${review.itemName || ''} ${review.reviewDesc|| ''}`;
      return <tr key={review.id}>
        <td style={{whiteSpace: 'nowrap'}}>{review.id}</td>
        <td>{rev}</td>
      </tr>
    });

    return (
      <div>
        <AppNavbar/>
        <Container fluid>
          <div className="float-right">
            <Button color="success" tag={Link} to="/reviews/new">Add Review</Button>
          </div>
          <h3>Tell us how we are doing!</h3>
          <Table className="mt-4">
            <thead>
            <tr>
              <th width="20%">Item Name</th>
              <th width="20%">Cost</th>
              <th>Review</th>
              <th width="10%">Actions</th>
            </tr>
            </thead>
            <tbody>
            {reviewList}
            </tbody>
          </Table>
        </Container>
      </div>
    );
  }
}

export default ReviewList;

Review. java (модель)

import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;
import lombok.NonNull;
import lombok.RequiredArgsConstructor;

import javax.persistence.*;

import java.sql.Date;
import java.util.Set;

@Data
@Entity
//for jpa
@Table(name = "review")
public class Review {

    @Id
    @GeneratedValue
    private Long id;
    @Column(name="name")
    private String name;
    private String itemName;
    private String reviewDesc;
    private Date created;


}

ReviewController Фрагмент:

import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.http.HttpStatus;
import org.springframework.http.ResponseEntity;
import org.springframework.web.bind.annotation.*;

import com.seniorproject.redcarpet.model.Review;
import com.seniorproject.redcarpet.model.ReviewRepository;

import javax.validation.Valid;
import java.net.URI;
import java.net.URISyntaxException;
import java.util.Collection;
import java.util.List;
import java.util.Optional;

@RestController
@RequestMapping("/api")
class ReviewController {

    private final Logger log = LoggerFactory.getLogger(ReviewController.class);
    @Autowired
    private ReviewRepository reviewRepository;

    public ReviewController(ReviewRepository reviewRepository) {
        this.reviewRepository = reviewRepository;
    }

    @GetMapping("/reviews")
    Collection<Review> reviews() {
        return reviewRepository.findAll();
    }

application.properties:

spring.datasource.url=jdbc:mysql://localhost:3306/restapi?useUnicode=true&useJDBCCompliantTimezoneShift=true&useLegacyDatetimeCode=false&serverTimezone=UTC
spring.datasource.username=myuser..
spring.datasource.password=mypass..

Консольный вывод console.log (обзоров) в render ()

Answer 1

Для людей, которые сталкиваются с этим сценарием: мне пришлось удалить существующие кортежи в существующей базе данных и, ТОГДА при добавлении записей, я смог увидеть их заполнение в моем представлении в React. Спасибо @wentjun за ваш совет по отладке. Создание простого console.log (обзоры) позволило мне увидеть количество существующих кортежей в базе данных, что помогло мне понять, что каким-то образом эти кортежи отображаются как нулевые записи.

Answer 2

Вы видите эту ошибку, потому что const reviewList пытается инициализировать в методе render(), но review равно null. Причина null не ясна, поэтому вам нужно будет пройтись по своему внутреннему и внешнему коду, чтобы гарантировать, что данные передаются через каждый слой, как и ожидалось.

Возможно, вам придется реструктурировать логи c в вашем компоненте React. Убедитесь, что он обращается только к элементам отзывов после , когда выборка и setState завершены. Поместите логику c, которая инициализирует reviewList, внутри финальной then() вашей выборки. (Вам нужно будет объявить var reviewList вместо const reviewList, потому что значение равно Dynami c.)