您能帮助我了解正确的修补程序是与React Router还是与React相关的？
我希望能够在每次用户再次点击相同的路线时重置状态（不确定这是否是正确的术语）。
我有一个原型，可以检查给定汽车的正确颜色或正确成本。
我的问题（如下所示）是每次我打相同的路线和/或随机播放方法时。我的列表可以控制显示/隐藏状态和颜色的状态，不会自行重置。
我有分别绘制 express:router:layer new '/' +0ms
express:router:route new '/login' +1ms
express:router:layer new '/login' +0ms
express:router:route post '/login' +0ms
express:router:layer new '/' +0ms
express:router:route post '/login' +0ms
express:router:layer new '/' +0ms
express:router:route new '/users' +0ms
express:router:layer new '/users' +0ms
express:router:route get '/users' +0ms
express:router:layer new '/' +0ms
express:router:route new '/signup' +0ms
express:router:layer new '/signup' +1ms
express:router:route post '/signup' +0ms
express:router:layer new '/' +0ms
express:router use '/' <anonymous> +0ms
express:router:layer new '/' +0ms
express:router use '/' <anonymous> +0ms
express:router:layer new '/' +0ms
express:router use '/' <anonymous> +0ms
express:router:layer new '/' +0ms
express:application set "port" to '3001' +0ms
Executing (default): SELECT 1+1 AS result
Connection has been established successfully.
express:router dispatching POST /login +4s
express:router query : /login +2ms
express:router expressInit : /login +0ms
express:router favicon : /login +2ms
express:router logger : /login +0ms
express:router jsonParser : /login +2ms
express:router urlencodedParser : /login +28ms
express:router cookieParser : /login +0ms
express:router serveStatic : /login +1ms
express:router initialize : /login +0ms
Executing (default): SELECT "id", "firstName", "lastName", "username", "email", "password", "createdAt", "updatedAt" FROM "users" AS "user" WHERE "user"."email" = 'a' LIMIT 1;
user found!
express:router <anonymous> : /login +25ms
express:router <anonymous> : /login +1ms
express:view require "jade" +0ms
express:view lookup "error.jade" +190ms
express:view stat "/home/zmigaddo/sc/views/error.jade" +0ms
express:view render "/home/zmigaddo/sc/views/error.jade" +1ms
POST /login 500 346.104 ms - 1910
和<Cost/>组件的路由
<Color/>然后，我将路线传递到我的主要父级组件中。即：
export const Routes = ({ state, shuffle }) => (
<Switch>
<Route
path="/car-cost"
render={() => <Cost {...state} shuffle={shuffle} />}
/>
<Route
path="/car-color"
render={() => <Color {...state} shuffle={shuffle} />}
/>
</Switch>
);
以下示例显示了// MAIN PARENT COMPONENT
export default class Dealership extends Component {
state = {
cars: [
{ name: "Ferrari", cost: "$9.000", color: "red", id: 1 },
{ name: "Porsche", cost: "$8.000", color: "black", id: 2 },
{ name: "lamborghini", cost: "$7.000", color: "green", id: 3 },
{ name: "McLaren", cost: "$6.000", color: "silver", id: 4 },
{ name: "Corolla", cost: "$50", color: "brown", id: 5 },
{ name: "Prius", cost: "$40", color: "beige", id: 6 },
{ name: "Saab", cost: "$30", color: "navy blue", id: 7 }
]
};
handleShuffle = () => {
this.setState({
cars: [...this.state.cars.sort(() => Math.random() - 0.5)]
});
};
render() {
return (
<BrowserRouter>
<div>
<Navigation />
<Routes
state={this.state}
shuffle={this.handleShuffle}
/>
</div>
</BrowserRouter>
);
}
}
组件：
<Cost />基本上，上面的组件会收到一个列表，并且// QUESTION COMPONENT
const Question = ({ guess }) => <h1>What car is {guess}</h1>;
// COST COMPONENT
export default class Cost extends Component {
render() {
const { cars, shuffle } = this.props;
const correctIndex = Math.floor(Math.random() * (cars.length - 1));
const correctCar = cars[correctIndex];
const car = cars.map(car => (
<CarList
key={car.id}
name={car.name}
guess={car.cost}
isCorrect={correctCar.cost === car.cost}
greet={this.onGreet}
/>
));
return (
<>
<Question key={correctCar.id} guess={correctCar.cost} />
<button onClick={shuffle}>go again</button>
<ul className="car-list">{car}</ul>
</>
);
}
}
控制状态以显示和显示颜色（如果汽车的 cost 与汽车的在<CarList/>组件上问到
<Question />我正在处理// CAR LIST COMPONENT
export default class CarList extends Component {
state = {
show: false
};
handleShow = () => {
this.setState({ show: true });
};
getColor = () => {
if (this.state.show) {
if (this.props.isCorrect) {
return "green";
} else {
return "red";
}
}
return "";
};
render() {
const { name, guess } = this.props;
const { show } = this.state;
return (
<li onClick={() => this.handleShow()} className={this.getColor()}>
{name}
<span className={show ? "show" : "hide"}>{guess}</span>
</li>
);
}
}
组件内部用于显示和控制颜色的状态，以便每个<Carlist/>都可以监听点击事件并相应地表现。
在此[代码沙箱] [1]上也可以看到此问题
是，每当我碰到相同的路线或<li/>方法时，随机化都会相应地发生，但是handleShufle()的状态保持不变。
当单击相同的链接路线时，如何将其恢复为原始状态？