Блог

Я следовал учебнику, но когда я запускал свой сервер React, страница открывалась, но ни одна из кнопок не вызывала функцию.

Я пытался:

1. Удаление node_модулей и установка npm для повторной установки (без разницы)
2. Вызов функций с помощью componentdidmount (функция все еще не вызывается)
3. Повторное выполнение урока (те же результаты)

Мой каталог:

• общественный
  • index.html
• сервер
  • index.js
  • app.js
• Src
  • app.js
  • index.js

Мои коды:

server/index.js

 require('ignore-styles')
require('@babel/register')({
    ignore: [/(node_module)/],
    presets: ['@babel/preset-env', '@babel/preset-react']
})
require('./server')
 

server/server.js

 import express from "express";
import fs from "fs";
import path from "path";

import React from "react";
import ReactDOMServer from "react-dom/server";

import App from "../src/App";

const PORT = 8080;

const app = express();

app.use("^/$", (req, res, next) => {
  fs.readFile(path.resolve("./public/index.html"), "utf-8", (err, data) => {
    if (err) {
      console.log(err);
      return res.status(500).send("Some error happened" err);
    }
    return res.send(
      data.replace(
        '<div id="root"></div>',
        `<div id="root">${ReactDOMServer.renderToString(<App />)}</div>`
      )
    );
  });
});

app.use(express.static('./src'));
app.listen(PORT, () => {
  console.log(`App launched on ${PORT}`);
});

 

src/app.js

 import React, { Component } from 'react';
import "./App.css";

export default class App extends Component {
    constructor(props) {
        super(props)
        this.state = ({ count: 0 })
        this.decrement = this.decrement.bind(this)
        this.increment = this.increment.bind(this)
    }
    increment(){
        this.setState({ count:   this.state.count })
    }

    decrement(){
        this.setState({ count: --this.state.count })
    }
    render() {
        return (
          <div>
              <p>{this.state.count}</p>
                <button onClick={this.increment}>Increment</button>
                <button onClick={this.decrement}>Decrement</button>
            </div>
      );
    }
}

 

src/index.js

 import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

ReactDOM.hydrate(<App />, document.getElementById('root'));

serviceWorker.unregister();
 

пакет.json

 {
  "name": "ssr-example",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "express": "^4.17.1",
    "react": "^16.14.0",
    "react-scripts": "3.2.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "ssr": "node server/index.js"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@babel/core": "^7.15.5",
    "@babel/preset-env": "^7.15.6",
    "@babel/preset-react": "^7.14.5",
    "@babel/register": "^7.15.3",
    "ignore-styles": "^5.0.1",
    "react-dom": "^16.14.0"
  }
}

 

Я запустил все это, используя команду «npm запустить ssr», и перешел на локальный хост:8080

Заранее приношу свои извинения, если на этот вопрос уже был дан ответ, я рассматривал другие решения, но, похоже, ни одно из них не работает для меня. Я застрял на долгое время, и это сводит меня с ума.