redux 提交数据时,在输入框中键入另一个字母之前,不会更新组件

wmvff8tz  于 2022-12-19  发布在  其他
关注(0)|答案(1)|浏览(94)

我有一个用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(....之前,第一次搜索后结果为空。当我再键入一个字符时,结果将填充。
我在我的智慧的尽头,为什么会发生这种情况,所以任何帮助将不胜感激!

bogh5gae

bogh5gae1#

看起来很像你使用的是常规redux,而不是 react-redux*。有必要修正这个问题。
使用react-redux时,需要订阅存储状态的更改。
当状态发生变化时,会调用useEffect,在useEffect中,如果需要,可以执行任意代码,然后我们将接收到的数据发送到我们组件的状态。

const [searchResultsTable, setTable] = React.useState(''); 

const { searchResults } = useSelector((state) => state); // get data from redux

useEffect(() => {
    // some code for manipulation
    setTable([ ...searchResults ])
}, [searchResults]);

对于表组件,我们将row参数更改为状态变量

return (    
    <form>
        ...
    </form>
    <Table
        ...
        rows={searchResultsTable}
    />
);

相关问题