Блог

Я обслуживаю сборку React с того же порта ( port 3000 ), на который мои файлы express получают запросы. Ниже приведен мой код для этого.

 app.use(express.static(path.join(__dirname, "client", "build")))

app.get('/', (req, res) => {
    res.sendFile(path.join(__dirname, "client", "build", "index.html"))
})
 

В моем приложении react я выполняю вызов API на сервер, и ответ API обновляет состояние. Я знаю (из тестирования), что получаю правильный ответ от сервера, и я знаю, что состояние правильно обновляется с ответом. Но когда я пытаюсь выполнить рендеринг <p>{this.state.data}</p> , все приложение ломается, и ничего не отображается.

У кого-нибудь есть идеи о том, почему это происходит? Я попытался обслуживать приложение React из его папки на другом порту, и оно по-прежнему не работает. Публикую весь соответствующий код ниже для справки.

Код реакции

 import React from 'react';
import './App.css';

class Form extends React.Component{
  constructor(props){
    super(props);
  }

  onTrigger = (event) => {
    this.props.callBack();
  }

  render(){
    return(
          <div>
              <form action="/photoupload" method="POST" className="" encType="multipart/form-data">
                  <label for="species">Species Name: 
                      <input type="text" name="species" id="species"/>
                  </label>
  
                  <label for="description">Description: 
                      <textarea name="description" id="description" placeholder="Enter a description of your shroom..."></textarea>
                  </label>
  
                  <label for="photo">Photo: 
                      <input type="file" name="mushroom" id="mushroom" accept="image/*"/>
                  </label>
  
                  <input onClick={this.onTrigger} type="submit"/>
  
              </form>
          </div>
    )
  }
}

class App extends React.Component {
  constructor(props){
    super(props);
    this.state = {
      data: ""
    };
  }

  componentDidMount(){
    fetch('/api', {method: "GET"})
    .then(response => response.json())
    .then(json => this.setState({
      data: json
    }))
    console.log(this.state)
  }

  handleClick = () => {
    console.log("Hello!")
  }
 
  render(){
    return (
      <div>
        <Form callBack={this.handleClick} />
        <p>{this.state.data}</p>
      </div>
    )
  }
}

export default App;
 

Серверный код

 const express = require('express')
const app = express();
const bodyParser = require('body-parser')
const multer = require('multer')
const upload = multer({dest: 'uploads/'})
const fs = require('fs')
const Mushroom = require('./db')
const path = require('path')
const cors = require('cors')

app.use(bodyParser.urlencoded({extended: false}));

app.use(express.static(path.join(__dirname, "client", "build")))

app.get('/', (req, res) => {
    res.sendFile(path.join(__dirname, "client", "build", "index.html"))
})

app.get('/api', (req, res) => {
    const mushroom = Mushroom.find({}, (err, docs) => {
        res.send(docs)
    });
})

app.post('/photoupload', upload.single('mushroom'), function (req, res) {
    var mushroom = new Mushroom();
    mushroom.species = req.body.species;
    mushroom.description = req.body.description;
    mushroom.path = req.file.path;
    mushroom.save()
    res.redirect("/")
})

app.listen(3000, () => {
    console.log("listening on 3000!")
})
 

Редактировать

Я просто собираюсь скопировать и вставить ошибки ниже:

 App.js:51 Objectdata: "{_id: 132454}"__proto__: Object
:3000/manifest.json:1 Failed to load resource: the server responded with a status of 404 (Not Found)
:3000/manifest.json:1 Manifest: Line: 1, column: 1, Syntax error.
:3000/favicon.ico:1 Failed to load resource: the server responded with a status of 404 (Not Found)
react-dom.production.min.js:216 Error: Minified React error #31; visit https://reactjs.org/docs/error-decoder.html?invariant=31amp;args[]=object with keys {_id, age, species, description, path, __v} for the full message or use the non-minified dev environment for full errors and additional helpful warnings.
    at ka (react-dom.production.min.js:140)
    at d (react-dom.production.min.js:144)
    at m (react-dom.production.min.js:146)
    at react-dom.production.min.js:150
    at Do (react-dom.production.min.js:176)
    at Hu (react-dom.production.min.js:271)
    at Pi (react-dom.production.min.js:250)
    at xi (react-dom.production.min.js:250)
    at _i (react-dom.production.min.js:250)
    at vi (react-dom.production.min.js:243)
uu @ react-dom.production.min.js:216
react-dom.production.min.js:140 Uncaught (in promise) Error: Minified React error #31; visit https://reactjs.org/docs/error-decoder.html?invariant=31amp;args[]=object with keys {_id, age, species, description, path, __v} for the full message or use the non-minified dev environment for full errors and additional helpful warnings.
    at ka (react-dom.production.min.js:140)
    at d (react-dom.production.min.js:144)
    at m (react-dom.production.min.js:146)
    at react-dom.production.min.js:150
    at Do (react-dom.production.min.js:176)
    at Hu (react-dom.production.min.js:271)
    at Pi (react-dom.production.min.js:250)
    at xi (react-dom.production.min.js:250)
    at _i (react-dom.production.min.js:250)
    at vi (react-dom.production.min.js:243)
 

Согласно вашей ошибке, кажется {this.state.data} , что это объект, и у него есть только 1 свойство, id поэтому вы можете изменить его на {this.state.data.id} вместо

Если вы перейдете на страницу уменьшенной ошибки из журнала вашей консоли, вы увидите, что ошибка связана с попыткой рендеринга объекта, с которым не будет работать <p> .

Это зависит от того, что вы хотите отобразить данные, чтобы увидеть данные в виде строки, измените свою строку на <p>{JSON.stringify(this.state.data)</p> , и она отобразит объект в виде строки.