我有一个用typescript编写的react组件,它有一个输入字段和一个按钮。用户可以输入一个输入,按下按钮后,相关结果将填充到一个表中。我使用React.useEffect()仅在searchTerm发生变化时运行搜索代码。在useEffect()中运行代码将填充表行,然后存储这些行以在able组件中显示。
export const SearchWindow: React.FC<Props> = props => {
const [searchInput, setSearchInput] = React.useState(''); // text value inside input box
const [searchTerm, setSearchTerm] = React.useState(''); // term to search for (set once search clicked)
const [results, setResults] = React.useState<IndexedText[]>([]);
const handleSearchInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
setSearchInput(event.target.value);
};
React.useEffect(() => {
if (searchTerm.length > 0) {
getSearchResults(props.config, searchTerm).then(async searchResults => {
setResults(searchResults);
const rows = searchResults.map(result => {
return {
cells: {
text: result.text,
},
};
});
store.dispatch(setSearchResults(rows));
});
}
}, [searchTerm]); // Only run search if searchTerm changes
// on 1st search, prints blank until another character is typed
console.log(store.getState().documentationIndex.searchResults);
return (
<form>
<input
type='search'
placeholder='Enter Search Term'
onChange={handleSearchInputChange}
value={searchInput}
/>
<<button onClick={() => setSearchTerm(searchInput)}>Search</button>
</form>
<Table
...
...
rows={store.getState().documentationIndex.searchResults}
/>
);
};
// -------------- store code ----------------------------
import { createSlice, PayloadAction } from '@reduxjs/toolkit';
// Reducer
export interface DocumentationIndexState {
searchResults: DataTableRow<TableSchema>[];
}
const initialState: DocumentationIndexState = {
searchResults: [],
};
const store = createSlice({
name: 'documentationIndex',
initialState,
reducers: {
setSearchResults: (state, action: PayloadAction<DataTableRow<TableSchema>[]>) => {
state.searchResults = action.payload;
},
},
});
export default store.reducer;
export const {
setSearchResults,
} = store.actions;
**除了在第一次搜寻时以外,程式码的行为与预期相同。**请遵循下列顺序:
1.用户在搜索输入框中输入“hello”,然后单击“搜索”按钮。
1.搜索运行成功,但“表”组件中未显示任何内容。
1.用户在输入框中已经存在的“hello”后面键入任意随机字符。
1.已使用“hello”的搜索结果成功更新表组件。
1.用户从输入框中删除“hello”并键入“foobar”,然后按下“搜索”按钮。
1.正确显示了“payon.com”的搜索结果
打印时
日志(存储、获取状态()、文档索引、搜索结果);
就在呈现组件的return(....之前,第一次搜索后结果为空。当我再键入一个字符时,结果将填充。
我在我的智慧的尽头,为什么会发生这种情况,所以任何帮助将不胜感激!
1条答案
按热度按时间bogh5gae1#
看起来很像你使用的是常规redux,而不是 react-redux*。有必要修正这个问题。
使用react-redux时,需要订阅存储状态的更改。
当状态发生变化时,会调用
useEffect
,在useEffect
中,如果需要,可以执行任意代码,然后我们将接收到的数据发送到我们组件的状态。对于表组件,我们将row参数更改为状态变量