React Chat 应用程序在生产环境中运行良好，但在开发环境中无法正常运行（聊天应用程序）| React（使用 Materia-ui），Socket.io，Express

Question

When I'm viewing the build mode of the app it doesn't update the chat and looks to render out certain areas twice as when I put a console.log within the functional component in store.js it outputs the log twice but doesn't actually update the chat.

However, when I check the build mode of the chat it works fine and doesn't have any issues. I've no idea what is happening, there's no strict mode anywhere so I can't see what could be causing it

Client Side Handling

import React, { useReducer } from "react";
import io from 'socket.io-client'

export const CTX = React.createContext();



const initState = {
    General: [
        {from: 'Jack', msg: 'Epic'},
        {from: 'John', msg: 'Totally Epic'},
        {from: 'James', msg: 'Amazing'},
    ],
    Topic1: [
        {from: 'Jack', msg: 'damn daniel'},
        {from: 'John', msg: 'dead meme '},
        {from: 'Jacob', msg: 'lmao'},
    ],
};

export const RECEIVE_MESSAGE = "RECEIVE_MESSAGE";
    
function reducer(state, action) {
    const { from, msg, topic } = action.payload;
  
    switch (action.type) {
      case "RECEIVE_MESSAGE":
        return {
          ...state,
          [topic]: [
            ...state[topic],
            {
              from,
              msg,
            },
          ],
        };
  
      default: {
        return state;
      }
    }
  }


let socket;


function sendChatAction(value){
    socket.emit('chat message', value);
    console.log(value);
}

export default function Store(props) {
    
    const [state, dispatch] = useReducer(reducer, initState);

    if(!socket){
        socket = io(':3001')
        socket.on('chat message', function(msg){
            dispatch({ type: "RECEIVE_MESSAGE", payload: msg });
        });
    }

    const user = 'Player' + Math.random(100).toFixed(2);
    console.log({ state });
    return (
        <CTX.Provider value={{ state, sendChatAction, user }}>
            {props.children}
        </CTX.Provider>
    );
};

React Component

import React from "react";
import { makeStyles } from '@material-ui/core/styles';
import Paper from '@material-ui/core/Paper';
import Typography from '@material-ui/core/Typography';

import List from '@material-ui/core/List';
import ListItem from '@material-ui/core/ListItem';
import ListItemText from '@material-ui/core/ListItemText';


import Chip from '@material-ui/core/Chip';
import TextField from '@material-ui/core/TextField';
import Button from '@material-ui/core/Button';

import {CTX} from './Store'

const useStyles = makeStyles((theme) => ({
    root: {
      margin: '50px',
      padding: theme.spacing(3, 2),
      textAlign: 'center',
    },
    flex: {
      display: 'flex',
      alignItems: 'center',
    },
    topicsWindow: {
      width: '30%',
      height: '300px',
      borderRight: '1px solid grey',
    },
    chatWindow: {
      width: '70%',
      height: '300px',
      padding: '20px',
    },
    chatBox: {
      width: '85%',
    },
    button: {
      width: '15%',
    }
  }));
  

export default function Dashboard(){

    const classes = useStyles();

    //CTX store
    const {state, sendChatAction, user} = React.useContext(CTX);
    const topics = Object.keys(state);

    //localstate
    const [activeTopic, changeActiveTopic] = React.useState(topics[0])
    const [textValue, changeTextValue] = React.useState('');
    

    return(
    <div>
      <Paper className={classes.root}>
          <Typography variant="h3" component="h3">
              Chat App
          </Typography>
          <Typography variant="h5" component="h5">
              {activeTopic}
          </Typography>
          
          <div className={classes.flex}>
            <div className={classes.topicsWindow}>

              <List>
                {
                  topics.map(topic => (
                    <ListItem onClick={e => changeActiveTopic(e.target.innerText)} key={topic} button>
                      <ListItemText primary={topic} />
                    </ListItem>
                  ))
                }

              </List>

            </div>
            <div className={classes.chatWindow}>

                {
                  state[activeTopic].map((chat, i) => {
                    return (
                    <div className={classes.flex} key={i}>
                      <Chip label={chat.from} className={classes.chip} />
                      <Typography variant='body1' gutterBottom>
                        {chat.msg}
                      </Typography>
                    </div>
                    )
                  })
                }

            </div>
          </div>
          <div className={classes.flex}>
          <TextField
           label="Send a chat" 
           className={classes.chatBox}
           value={textValue}
           onChange={e => changeTextValue(e.target.value)}
           margin="normal"
           />

          <Button 
            variant="contained" 
            color="primary" 
            onClick={() => {
              sendChatAction({
                from: user, 
                msg: textValue, 
                topic: activeTopic
              });
              changeTextValue('');
              }}>
            Send
          </Button>
          </div>
      </Paper>
    </div>
    );
}

Server

var app = require('express')();
var http = require('http').createServer(app);
var io = require('socket.io')(http);

io.on('connect', function(socket) {
    console.log('user connected', socket.id);
    socket.on('chat message', (msg) => {
        console.log('message: ' + JSON.stringify(msg));
        io.emit('chat message', msg)
    });
});

http.listen(3001, function() {
    console.log('listening on * : 3001');    
});

I've been reading through the documentation for reducer function and react hooks but I can't see what it might be

Answer 1

I'm answering my own question rather than deleting so future people can see.

remove strict mode from the index.js file in src.