如何在React中展示服务端与客户端的通信历史

嘿，我来帮你搞定在React里展示服务端与客户端的通信历史～

首先，我们需要调整组件的状态来存储所有通信记录——你的现有代码只保存了当前的猜测数字和结果，我们可以新增一个history数组，用来存储每一次交互的详细信息（比如猜测值、返回结果、请求状态）。之后每次和服务端交互后，把记录追加到数组里，最后在页面上渲染这个数组即可。

下面是修改后的完整代码示例：

import axios from 'axios';
import React, { Component } from 'react';

class GuessEngine extends Component {
  constructor(props) {
    super(props);
    this.state = {
      number: null,
      result: null,
      // 新增数组存储所有通信历史
      history: [],
    };
  }

  componentDidMount() {
    this.makeGuess(5000);
  }

  // 把猜数字请求抽成复用方法
  makeGuess = (guessNumber) => {
    axios
      .post('http://localhost:3001/number', {
        isNumber: guessNumber,
      })
      .then(response => {
        const { resultCode } = response.data;
        // 追加成功的通信记录到历史数组
        this.setState(prevState => ({
          number: guessNumber,
          result: resultCode,
          history: [
            ...prevState.history,
            {
              guess: guessNumber,
              result: resultCode,
              status: '请求成功'
            }
          ]
        }));
      })
      .catch(error => {
        // 请求失败也记录错误信息
        this.setState(prevState => ({
          history: [
            ...prevState.history,
            {
              guess: guessNumber,
              result: error.message,
              status: '请求失败'
            }
          ]
        }));
      });
  }

  render() {
    const { history } = this.state;
    return (
      <div className="guess-engine">
        <h2>猜数字通信历史</h2>
        {/* 渲染所有通信记录 */}
        <ul className="history-list">
          {history.map((record, index) => (
            <li key={index} style={{ color: record.status.includes('成功') ? '#2ecc71' : '#e74c3c' }}>
              <span>第{index + 1}次交互：</span>
              <span>猜测数字：{record.guess}</span>
              <span>结果：{record.result}</span>
              <span>状态：{record.status}</span>
            </li>
          ))}
        </ul>
        {/* 新增手动提交猜测的交互区 */}
        <div className="new-guess">
          <input 
            type="number" 
            placeholder="输入猜测数字"
            ref={input => this.guessInput = input}
          />
          <button onClick={() => this.makeGuess(this.guessInput.value)}>提交猜测</button>
        </div>
      </div>
    );
  }
}

export default GuessEngine;

关键改动说明： #

• 状态扩展：新增history数组，每条记录包含猜测数字、返回结果、请求状态，确保所有交互都被留存。
• 逻辑复用：把发起请求的逻辑封装成makeGuess方法，初始化请求和手动提交请求都能复用，避免代码冗余。
• 状态安全更新：使用prevState获取历史记录再追加新内容，避免直接修改状态导致的覆盖问题。
• 错误场景覆盖：请求失败时也将错误信息存入历史，让用户能看到完整的交互过程。
• 可视化展示：通过列表渲染所有历史记录，用颜色区分成功/失败状态，提升可读性。

这样就能清晰展示客户端和服务端的所有通信历史啦～

内容的提问来源于stack exchange，提问作者MountainConqueror