React聊天应用程序在生产中运行良好，但在开发中运行不佳(聊天应用程序)|React(使用Material ui)，S

Question

当我查看应用程序的构建模式时，它不会更新聊天，并且看起来会渲染某些区域两次，因为当我在store.js的功能组件中放入console.log时，它会输出两次日志，但实际上不会更新聊天。

然而，当我检查聊天的构建模式时，它运行良好，没有任何问题。我不知道发生了什么，任何地方都没有严格的模式，所以我看不出是什么导致了

客户端处理

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>
);
};

反应组件

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>
);
}

服务器

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');    
});

我一直在阅读reducer函数和react钩子的文档，但我看不出它可能是什么

Answer 1

我在回答我自己的问题，而不是删除，以便将来的人可以看到。

从src中的index.js文件中删除strict模式。