Question

我有一个要在事件发生时执行的匹配组件。

import React, {Component} from 'react';
import axios from 'axios'
import './Love.css'
import  Match from './Matches/Match'
import MatchWrapper from './HOC/MatchWrapper';

class Love extends Component{

    state= {
        inputName: '',
        inputSname: '',
        percentage: 0,
        result: '',
        showResult: false
    }

    componentDidMount(){
        console.log('hello')
    }

    findMatchHandler = () =>{
    axios.get(`https://love-calculator.p.mashape.com/getPercentage?fname=${this.state.inputName}&sname=${this.state.inputSname}`,{
        headers: {
           "X-Mashape-Key": "cZA91FBSWlmshegV4IsGJIcGoc3yp1Eq9cCjsnjMGOVB35Z1Ud",
           "Accept": "application/json"
        }
       }).then(res =>
           this.setState({
               name: res.data.fname,
               sName: res.data.sname,
               percentage: res.data.percentage,
               result: res.data.result,
               showResult: true
           })
           )
           }

render(){

      console.log(this.state.percentage)
      console.log(this.state.showResult)
        return(

            <div className={"main-div " + (this.state.percentage > 75 && this.state.showResult ? "match " : ' ') + (this.state.percentage > 50  && this.state.percentage < 75 && this.state.showResult === true ? 'semi ' : ' ') + (this.state.percentage < 50 && this.state.showResult ? 'no-match': '')}>

                    <button onClick={this.findMatchHandler}>Find love!</button>
                    <input type="text" value={this.state.inputName} onChange={(event) => this.setState({inputName: event.target.value, showResult: false})} placeholder="enter your name"/>
                    <input type="text" value={this.state.inputSname} onChange={(event) => this.setState({inputSname: event.target.value, showResult: false})} placeholder="enter your name"/>



                    <Match
                    inputName={this.state.inputName}
                    inputSname={this.state.inputSname}
                    percentage={this.state.percentage}
                    result={this.state.result}
                    show={this.state.showResult}
                    />
               </div>
        )
}
}
export default Love

我向服务器发出axios请求，然后调用匹配组件。在我的比赛组件中。

我已将我的match组件包装在一个更大的订单组件中，以将功能拆分为多个组件

import React from "react";

const MatchWrapper = WrappedComponent => (props) => {
  const {show, percentage } = props;
  console.log(props.percentage)
  let type = "";
  switch (true) {
    case percentage > 75:
      type = "success";
      break;
    case percentage >= 50 && 75 >= percentage:
      type = "mediocre";
      break;
    case percentage <= 50:
      type = "failure";
      break;
  }

  return show && <WrappedComponent {...props} type={type} />
}

export default MatchWrapper;

在这里，我将道具“ type”进一步发送到我的匹配组件，该组件依赖于道具“ type”来找出要渲染的组件。

import React, { Component } from "react";
import MatchWrapper from "../HOC/MatchWrapper";
import Success from '../Displays/Succes/Succes'
import Mediocre from '../Displays/Mediocore/Mediocre'
import Failure from '../Displays/Failure/Failure'


const match = (props, type) => {
  console.log(type) 
  let display = ""
  if(type="success"){
    display = <Success {...props} />
  } else if(type="mediocre"){
    display=<Mediocre {...props}/>
  }else{
    display=<Failure {...props} />
  }
  return (
    <div>
      {props.show && 
      <div className="match"> 
        {display}
        {display}
        </div>
      }
    </div>
  );
};
export default MatchWrapper(match);

问题在于，无论传入的百分比如何，它都会呈现Success组件。我相信问题在于，match组件在show Result之前呈现，并且结果始终是相同的，有一种方法，我可以修复此问题，以便它仅在事件发生时呈现，并呈现正确的组件。

高阶组件在ReactJS中总是返回相同的结果

0 个答案: