为什么我的内容渲染了一秒钟，然后在尝试传递道具时消失了?我正在使用react redux

Question

我正在尝试将内容从一个组件呈现到另一个组件。我有一个搜索组件，包括文本表单、日期表单和数字表单。当我提交信息时，它会在结果屏幕上显示一秒钟，然后消失。我希望在用户再次搜索之前，内容保持呈现状态。

谢谢。

https://github.com/jasonbean3000/redux-passing-props

https://superlative-pithivier-b7794b.netlify.app

Results.jsx
import React from 'react';
import { useEffect } from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { resultsSlice, addedSearchResults, addServerResults, addDateResults, addIdResults } from '../../app/resultsSlice';
import './Results.css'

export default function Results() {

const searchResults = useSelector(addedSearchResults);
const dispatch = useDispatch();




return (
<div className="results" >
<h3> Server: {searchResults.server.server}</h3>   
<h3> Date: {searchResults.server.date}</h3>  
<h3> ID: {searchResults.server.id}</h3>  
</div>
)
};

中断

Search.jsx
import React, { useState } from "react";
import { useDispatch } from "react-redux";
import { addedSearchResults, addServerResults } from "../../app/resultsSlice";
import './Search.css'
export default function Search() {
const dispatch = useDispatch();

const [serverSearch, setServerSearch] = useState({});
const handleChange = ({ target }) => {
const {name, value} = target;
setServerSearch((prev) => ({
...prev,
[name]: value
}));
};
// const handleSubmit = (event) => {
//     event.preventDefault();
//     alert(JSON.stringify(serverSearch, '', 2));
// };
const handleSubmit = () => {
dispatch(addServerResults(serverSearch));
};
return( 
<div className="search">
<form onSubmit={handleSubmit}>
<div>
<button>Search</button>
</div>
<label >
<input
onChange={handleChange}
value={serverSearch.server}
id="server"
name="server"
type="string"
placeholder="Server Name"
>
</input>
</label>
<label >
<input 
onChange={handleChange}
value={serverSearch.date}
id="date"
name="date"
type="date"
>
</input>
</label> 
<label >
<input
onChange={handleChange}
value={serverSearch.id}
id="id"
name="id"
type="number"
placeholder="Server ID"
>
</input>
</label>
</form>  
</div>
)

};

中断

resultsSlice.js
import { createSlice, createSelector } from "@reduxjs/toolkit";
const initialState = {
server: '',
date: '',
id: ''
}
const resultsSlice = createSlice({
name: 'searchResults',
initialState,
reducers: {
// selector function addServerResults, takes state as argument
// returns what is needed by the component from the state
addServerResults(state, action) {
state.server = action.payload;
},
addDateResults(state, action) {
state.date = action.payload;
},
addIdResults(state, action) {
state.id = action.payload;
}
}
})

export const { 
addServerResults,
addDateResults,
addIdResults 
} = resultsSlice.actions;
export default resultsSlice.reducer;
export const addedSearchResults = (state) => state.results;

Answer 1

从codecademy论坛得到答案

我需要添加防止默认搜索组件