如何显示服务器 - 客户端与 React 的通信历史记录

Question

我构建了这样的东西：

import axios from 'axios';
import React, { Component } from 'react';
class GuessEngine extends Component {
  constructor(props) {
    super(props);

    this.state = {
      number: null,
      result: null,
    };
  }

  componentDidMount() {
    const firstGuess = 5000;
    axios
      .post('http://localhost:3001/number', {
        isNumber: firstGuess,
      })
      .then(response => {
        const { resultCode } = response.data;
        this.setState({ number: firstGuess });
        this.setState({ result: resultCode });
      })
      .catch(error => console.log(error));
  }

  componentDidUpdate() {
    if (this.state.result !== 'success') {
      if (this.state.result === 'lower') {
        const newNumber = this.state.number - 1;
        axios
          .post('http://localhost:3001/number', {
            isNumber: newNumber,
          })
          .then(response => {
            const { resultCode } = response.data;
            this.setState({ result: resultCode, number: newNumber });
          });
      } else if (this.state.result === 'higher') {
        const newNumber = this.state.number + 1;
        axios
          .post('http://localhost:3001/number', {
            isNumber: newNumber,
          })
          .then(response => {
            const { resultCode } = response.data;
            this.setState({ result: resultCode, number: newNumber });
          });
      }
    } else if (this.state.result === 'success') {
      console.log(`Success! The secret number is ${this.state.number}!`);
    } else {
      console.log(`Sorry! Some errors occured!`);
    }
  }

  render() {
    return <div>Test</div>;
  }
}

export default GuessEngine;

我的服务器生成了一个密码，我的客户端应用正在猜测它。我可以 console.log 每次猜测和结果 (lower/higher) 但我想知道如何存储每个猜测然后向用户显示我的所有应用猜测历史记录。

我是否应该将每个猜测写入 this.state.guesses 对象，然后在 render() 方法中，我应该映射它以显示给用户，还是更好的方法？

Answer 1

将条目添加到状态的猜测数组是正确的方法。您应该在使用 setState 之前复制数组。检查 this answer:

上的扩展运算符语法

this.setState({guesses: [...this.state.guesses, newGuess]});

并使用类似这样的东西来渲染：

{this.state.guesses.map((guess, index) => <div key={index}>{guess}</div>)}

如何显示服务器 - 客户端与 React 的通信历史记录

How to show server - client communcation history with React

javascript

reactjs