Node.js 当我从与express相同的来源提供React时，React在渲染元素时遇到问题

我从express文件接收请求的同一端口（

端口3000

）提供React构建。下面是我这样做的代码

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的响应会更新状态。我知道（从测试中）我从服务器得到了正确的响应，并且我知道状态已使用响应正确更新。但是当我尝试渲染

{this.state.data}

时，整个应用程序都会中断，并且不会渲染任何内容

有人知道为什么会这样吗？我尝试从另一个端口上的文件夹中为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=31&args[]=object%20with%20keys%20%7B_id%2C%20age%2C%20species%2C%20description%2C%20path%2C%20__v%7D 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=31&args[]=object%20with%20keys%20%7B_id%2C%20age%2C%20species%2C%20description%2C%20path%2C%20__v%7D 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)

如果从控制台日志转到，您可以看到错误是由于试图渲染对象，而该对象无法使用

这取决于您希望将数据呈现为什么，要将数据视为字符串，请将行更改为

{JSON.stringify（this.state.data）

，它将以字符串形式呈现对象。

如果从控制台日志转到，您可以看到错误是由于试图呈现对象，而该对象无法使用

---

这取决于您希望将数据呈现为什么，要将数据视为字符串，请将行更改为

{JSON.stringify（this.state.data）

，它将对象呈现为字符串。

根据您的错误，似乎是

{this.state.data}

是一个对象，只有一个名为

id

的属性，因此您可以将其更改为

{this.state.data.id}

，根据您的错误，似乎

{this.state.data}

是一个对象，只有一个名为

id

的属性，因此您可以将其更改为

{this.state.data.id}

相反

能否请您在问题中添加崩溃日志或控制台日志？@JuanMedina刚刚更新能否请您在问题中添加崩溃日志或控制台日志？@JuanMedina刚刚更新