Блог

сделал простой компонент чата в простом приложении, чтобы изучить полный стек, но я не уверен, почему мой запрос на публикацию не работает, когда я использую axios react, хотя он работает, когда я отправляю запрос на публикацию почтальону. Итак, я думаю, что проблема в моем коде. В postman, когда я ввожу имя пользователя и сообщение в ключах и даю им строковые значения, это работает (см. Заключительную консоль.журнал внизу). Но когда я делаю это, используя свой код, он отправляет нулевые значения вместо строковых значений, которые я передаю. Даже несмотря на то , что я использую JSON.stringify , каким-то образом axios заканчивает отправку [object] , в этом проблема? Если нет, то что я делаю не так? Большое спасибо. Вот мой код:

 updateChat = e => {
        e.preventDefault();
        const { chat , username , chats } = this.state;

        this.setState({ chat : e.target.value });

        chats.push(chat);

        console.log("username: "   username   ", message: "   chat)

        var body = { 
            username : username,
            message : chat };

        console.log("body: "   body)

        axios({
            method: 'post',
            url : 'http://localhost:8080/api/chats/add', 
            data: body
        })
        .then(function (response) {
            console.log("Submitted: "   response);
        })
        .catch(function (error) {
            console.log("Post error: "   error);
        });
        this.pullChats();
    }

pullChats() {
        axios.get('http://localhost:8080/api/chats')
        .then(res => {
            this.setState({ chats : res.data });
            console.log(res.data); 
        })
        .catch(function (error) {
            console.log("Error: "   error);
        });
    }

<div>
                {chats.map(chats =>
                <span className="badge badge-pill badge-warning p-3">
                    <p>{chats.message}</p> Username: <span className="text-green">{chats.username}</span>
                </span>)}
                <p>Posting as(username): <span className="text-green">{username}</span></p>
                <input type="text" value={chat} onChange={this.handleChatAddition}/>
                <button className="btn btn-light" onClick={this.updateChat}>Send</button>
            </div>
 

Когда я консолирую, войдите.:

 username: USERNAME, message: testest
 

2-я строка:

 body: {"username":"USERNAME","message":"testest"}
 

3-я строка:

 Submitted: [object Object]
 

4-я строка: (объекты с идентификаторами 1,2,6,7 и 8 были созданы из postman, в то время как остальные были созданы с помощью axios. По какой-то причине, когда я использую axios, я вставляю нулевые значения, даже если они являются строками, я не уверен, почему)

 (15) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]
0: {id: 1, username: "UsernameABC", message: "This is my question"}
1: {id: 2, username: "User2", message: "Okokok"}
2: {id: 3, username: null, message: null}
3: {id: 4, username: null, message: null}
4: {id: 5, username: null, message: null}
5: {id: 6, username: "testesttesttrtr", message: "hitest"}
6: {id: 7, username: "testesttesttrtr", message: "hitest"}
7: {id: 8, username: "testesttesttrtr", message: "hitest"}
8: {id: 9, username: null, message: null}
9: {id: 10, username: null, message: null}
10: {id: 11, username: null, message: null}
11: {id: 12, username: null, message: null}
12: {id: 13, username: null, message: null}
13: {id: 14, username: null, message: null}
14: {id: 15, username: null, message: null}
length: 15
__proto__: Array(0)
 

Btw here is my backend:

Controller:

 @CrossOrigin(origins="*")
@RestController
@RequestMapping("api/")
public class ChatController {
    
    @Autowired
    private ChatRepository chatRepository;
    
    @GetMapping("chats")
    public List<Chat> getChats(){
        return this.chatRepository.findAll();
    }
    
    @PostMapping("chats/add")
    public Chat addChat( Chat newChat) {
        return chatRepository.save(newChat);
    }

}
 

Model:

 @Entity
@Table(name="users")
public class Chat {
    
    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    private long id;
    
    @Column(name = "username")
    private String username;
    
    @Column(name = "message")
    private String message;
    public long getId() {
        return id;
    }
    
    public Chat() {
        
    }
    
    public Chat(String username, String message) {
        super();
        this.username = username;
        this.message = message;
    }



    public void setId(long id) {
        this.id = id;
    }
    public String getUsername() {
        return username;
    }
    public void setUsername(String username) {
        this.username = username;
    }
    public String getMessage() {
        return message;
    }
    public void setMessage(String message) {
        this.message = message;
    }
}
 

Хранилище:

 @Repository
public interface ChatRepository extends JpaRepository<Chat, Long> {

} 
 

Приложение:

@

 SpringBootApplication
public class ChatBackendApplication implements CommandLineRunner {

    public static void main(String[] args) {
        SpringApplication.run(ChatBackendApplication.class, args);
    }

    
    @Autowired
    private ChatRepository chatRepository;
    
    @Override
    public void run(String... args) throws Exception {
        this.chatRepository.save(new Chat("UsernameABC", "This is my question"));
        this.chatRepository.save(new Chat("User2", "Okokok"));
        
    }

}
 

Вы пробовали приведенный ниже метод для выполнения запроса на публикацию с помощью axios?

 axios.post('http://localhost:8080/api/chats/add', { username: username, message: chat })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });
 

Аналогично вашему запросу на получение