Блог

Содержимое ошибки выглядит следующим образом: Объекты недопустимы как дочерние элементы React (найдено: объект с ключами {}). Если вы хотели отобразить коллекцию дочерних элементов, вместо этого используйте массив.

Посмотрите react-dom.development.js

  "Objects are not valid as a React child 
(found: "   (Object.prototype.toString.call(newChild) === '[object Object]' ? 'object with keys {'   Object.keys(newChild).join(', ')   '}' : newChild)   "). 
If you meant to render a collection of children, use an array instead."
  

 // This is my code

import React, { Component } from "react";

class ResponseCheck extends Component {
  state = {
    state: "waiting",
    message: "Click and Start.",
    result: [],
  };

  timeout;
  startTime;
  endTime;

  onClickScreen = () => {
    const { state } = this.state;
    if (state === "waiting") {
      timeout.current = setTimeout(() => {
        this.setState({
          state: "now",
          message: "Click now",
        });
        this.startTime = new Date();
      }, Math.floor(Math.random() * 1000)   2000); // 2초~3초 랜덤
      this.setState({
        state: "ready",
        message: "Click when it turns green.",
      });
    } else if (state === "ready") {
      // 성급하게 클릭
      clearTimeout(this.timeout);
      this.setState({
        state: "waiting",
        message: "Too hasty.",
      });
    } else if (state === "now") {
      // 반응속도 체크
      endTime.current = new Date();
      this.setState((prevState) => {
        return {
          state: "waiting",
          message: "Click and Start.",
          result: [...prevState.result, this.endTime, this.startTime],
        };
      });
    }
  };

  onReset = () => {
    this.setState({
      result: [],
    });
  };

  renderAverage = () => {
    const { result } = this.state;
    return result.length === 0 ? null : (
      <>
        <div>Average Time: {result.reduce((a, c) => a   c) / result.length}ms</div>
        <button onClick={this.onReset}>Reset</button>
      </>
    );
  };
  render() {
    const { state, message } = this.state;
    return (
      <>
        <div id="screen" className={state} onClick={this.onClickScreen}>
          {message}
        </div>
        {this.renderAverage()}
      </>
    );
  }
}
export default ResponseCheck;
  

В чем проблема? Пожалуйста, помогите…
Я не смог решить эту проблему

Полный код ошибки приведен ниже. Я добавил всю ошибку в код

«Посмотрите react-dom.development.js ‘ Приведенная выше часть совпадает с номером в этой строке
react-dom.development.js:13231

 react-dom.development.js:13231 Uncaught Error: Objects are not valid as a React child (found: object with keys {}). If you meant to render a collection of children, use an array instead.
    at throwOnInvalidObjectType (react-dom.development.js:13231)
    at reconcileChildFibers (react-dom.development.js:14133)
    at reconcileChildren (react-dom.development.js:16990)
    at mountIndeterminateComponent (react-dom.development.js:17890)
    at beginWork (react-dom.development.js:19049)
    at HTMLUnknownElement.callCallback (react-dom.development.js:3945)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:3994)
    at invokeGuardedCallback (react-dom.development.js:4056)
    at beginWork$1 (react-dom.development.js:23959)
    at performUnitOfWork (react-dom.development.js:22771)
  

Скопируйте / вставьте ваш фрагмент кода в рабочий, работающий codesandbox, и я не могу повторить вашу ошибку. Единственным массивом в этом компоненте является state.result , и поскольку вы его уменьшаете, я не думаю, что он должен вызывать предупреждение «render», как вы видите.

Похоже, что вы пытаетесь использовать ref react для таймеров, в вашем фрагменте вы ссылаетесь на a timer.current , но это не ссылка, и так и должно быть this.timer .

1. Следует ссылаться timer на as this.timer , удалить .current .
2. Следует ссылаться endTime на as this.endTime , удалить .current .
3. Введите в result массив значение this.endTime - this.startTime , чтобы вычислить среднее значение.

Код

 class ResponseCheck extends Component {
  state = {
    state: "waiting",
    message: "Click and Start.",
    result: []
  };

  timeout;
  startTime;
  endTime;

  onClickScreen = () => {
    const { state } = this.state;
    if (state === "waiting") {
      this.timeout = setTimeout(() => { // <-- this.timeout
        this.setState({
          state: "now",
          message: "Click now"
        });
        this.startTime = new Date();
      }, Math.floor(Math.random() * 1000)   2000); // 2초~3초 랜덤
      this.setState({
        state: "ready",
        message: "Click when it turns green."
      });
    } else if (state === "ready") {
      // 성급하게 클릭
      clearTimeout(this.timeout);
      this.setState({
        state: "waiting",
        message: "Too hasty."
      });
    } else if (state === "now") {
      // 반응속도 체크
      this.endTime = new Date(); // <-- this.endTime
      this.setState((prevState) => {
        return {
          state: "waiting",
          message: "Click and Start.",
          result: [...prevState.result, this.endTime - this.startTime] // <-- correct time value
        };
      });
    }
  };

  onReset = () => {
    this.setState({
      result: []
    });
  };

  renderAverage = () => {
    const { result } = this.state;
    return result.length === 0 ? null : (
      <>
        <div>
          Average Time: {result.reduce((a, c) => a   c) / result.length}ms
        </div>
        <button onClick={this.onReset}>Reset</button>
      </>
    );
  };
  render() {
    const { state, message } = this.state;
    return (
      <>
        <div id="screen" className={state} onClick={this.onClickScreen}>
          {message}
        </div>
        {this.renderAverage()}
      </>
    );
  }
}