问不变冲突:在触发函数时，对象作为React子级无效

EN

  delay = async () => {
     const sleep = ms => new Promise(resolve => setTimeout(resolve, ms))
     await sleep(1000);
     return <Redirect to="/dashboard" />
  }

import React, {Component} from 'react';
import {Redirect} from "react-router-dom";
import Grid from '@material-ui/core/Grid';
import './App.css';
import { withRouter } from 'react-router-dom'

class Home extends Component {

    state = {
        number: "",

        numbers: ["111-111-1112, 111-111-1111, 111-111-1116, 111-111-1118"]
      };


      onChange = e => {
        e.preventDefault();

        this.setState({
          number: e.target.value
        });
      };

      delay = async () => {
        const sleep = ms => new Promise(resolve => setTimeout(resolve, ms))
        await sleep(1000);
        return <Redirect to="/dashboard" />
      }

      validate = myNum => this.state.numbers.find(num => num === myNum);
      render(){

        const validatedNumber = (
          <div>
            <span style={{ color: "green" }}>Activated ✅ </span>
            {this.delay()}
          </div>
        );
        return (
          <div className="main">
             <Grid container >
               <Grid item sm={8} md={12} >
                <input
                type="text"
                placeholder="Validate Number"
                value={this.state.number}
                onChange={this.onChange}
                />
            <h2>
              {this.validate(this.state.number) ? (
                validatedNumber
              ) : (
                <div>Not in the system</div>
              )}
            </h2>

               </Grid>   

             </Grid>

          </div>
        );

      }
}

export default Home;