javascript - 高阶组件总是在 ReactJS 中返回相同的结果
问题描述
我有一个匹配组件,我想在一个事件中被执行。
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 请求,然后调用匹配组件。在我的匹配组件中。
我已将匹配组件包装在一个更大的订单组件中,以将功能拆分为多个组件
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;
在这里,我将道具“类型”进一步发送到我的匹配组件,这取决于道具“类型”来找出要渲染的组件。
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 之前呈现的,并且结果总是相同的,有没有办法,我可以解决这个问题,以便它只在事件上呈现,并呈现正确的组件。
解决方案
推荐阅读
- c++ - 枚举类默认初始化
- html - 找不到如何消除顶部栏菜单上方的空白
- c++ - SFML SetFont 分段错误崩溃
- entity-framework - 如何在多线程应用程序中使用 DbContext
- django - Django Admin:ChangeList 视图中的一列中有多个可编辑条目
- typescript - 断言导入的 Typescript 正在使用 Jest 导出
- html - 我应该为图片库使用 WebP 图像格式吗?
- amazon-web-services - 如何签署 AWS 转录流请求
- angular - 角度形式设置正确但未传递形式值
- docker - 在 Docker (Windows 10) 上启动 HDP 沙盒代理时端口上的权限被拒绝