如何使用setState钩子覆盖state中的数据

Question

我正在Next.js中使用上下文API，需要知道在下面的代码片段中更改状态的最佳方法。预期的功能是，当用户在另一个表单组件中按下submit时，getsearchchinput函数将使用此值更新SearchInput状态。每次用户在输入字段中提交一个新字符串时都会发生这种情况目前为止，

const getSearchInput = (string) => {
setSearchInput(string);
};

问题是我意识到像这样直接更新状态从来都不是一个好主意。但我不知道如何才能删除前一个字符串，并将其替换为最新的。如果您正在寻找完整上下文组件的代码，可以在

下面找到它。

import axios from 'axios';
import { createContext, useState, useEffect } from 'react';
const SearchContext = createContext();
const SearchProvider = ({ children }) => {
const [ state, setstate ] = useState(null);
const [ searchInput, setSearchInput ] = useState('');
useEffect(
() => {
const source = axios.CancelToken.source();
const getData = async () => {
try {
const response = await axios.get(`https://rickandmortyapi.com/api/character/?name=${searchInput}`);
setstate(response.data.results);
} catch (error) {
console.error('error', error);
}
};
getData();
return () => {
source.cancel();
};
},
[ searchInput ]
);
const getSearchInput = (string) => {
setSearchInput((prev) => string);
};
return <SearchContext.Provider value={{ state, getSearchInput, searchInput }}>{children}</SearchContext.Provider>;
};
export { SearchContext, SearchProvider };

Answer 1

实际上，你用对了!您正在使用setSearchInput，这是更新状态的唯一方法。直接改变状态(或改变它)意味着你以这样的方式改变它:

const getSearchInput = (string) => {
searchInput=string;
};

你可以阅读react文档了解更多细节

Answer 2

const [state, setState] = useState(initalValue)

状态有一个initialValue用于第一次渲染

更新由useState定义的状态的唯一方法是使用返回列表中的第二个元素，通常以set关键字作为惯例开始，因为它是setter

要更新状态，你必须在这里使用setStatesetState函数既可以接受函数，也可以接受单个值如果它是函数，它将接收最后一个状态，如果它是一个值，它将用一个新值 覆盖该状态

setState(prevState => newState)
setState(newState)

如果你搜索重构技巧或其他东西，我想你可以删除getSearchInput声明，并传递setState与不同的名称作为你的上下文值，例如

return (
<SearchContext.Provider 
value={{ 
state, 
getSearchInput: setSearchInput, 
searchInput 
}}
>
{children}
</SearchContext.Provider>
);

对于在react中使用上下文作为状态管理器工具，强烈建议使用useReducer，并在两个不同的上下文级别传递分派和状态

const [state, dispatch] = useReducer(reducer, initialArg, init)
return (
<StateContext.Provider value={state}>
<DispatchContext.Provider value={dispatch}>
{children}
</DispatchContext.Provider>
</StateContext.Provider>
)

引用
useReducer
应用状态管理与react