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

【问题标题】：How to use the setState hook to overwrite the data in state如何使用 setState 钩子覆盖 state 中的数据
【发布时间】：2021-05-05 00:50:26
【问题描述】：

我正在使用 Next.js 中的 Cotext API，需要知道在下面的 sn-p 代码中更改状态的最佳方法。预期的功能是，当用户在另一个表单组件中按下提交时，getSearchInput 函数将使用此值更新SearchInput 状态。这应该发生在用户在输入字段中提交一个新字符串并且我到目前为止的工作时，

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

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

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 };

【问题讨论】：

您能与我们分享一下为什么您目前的方法从来都不是一个好主意吗？

标签： reactjs next.js setstate use-state

【解决方案1】：

实际上，您以正确的方式使用它！您正在使用 setSearchInput 这是更新状态的唯一方法。直接改变状态（或改变它）意味着你以这样的方式改变它：

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

您可以阅读 react docs 了解更多详情

【讨论】：

【解决方案2】：

const [state, setState] = useState(initalValue)

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

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

所以要更新该状态，您必须在此处使用 setState setState 函数可以同时接受函数和单个值如果它是函数，它将接收最后一个状态，如果它是一个值，它将用一个新值覆盖状态

setState(prevState => newState)
setState(newState)

如果您搜索重构技巧或其他内容，我想您可以删除 getSearchInput 声明并使用不同名称的 setState 作为您的上下文值，例如

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

另外，为了在 react 中使用 Context 作为状态管理器工具，强烈建议使用 useReducer 并在两个不同的上下文级别传递调度和状态

const [state, dispatch] = useReducer(reducer, initialArg, init)

return (
  <StateContext.Provider value={state}>
    <DispatchContext.Provider value={dispatch}>
      {children}
    </DispatchContext.Provider>
  </StateContext.Provider>
)

参考文献
useReducer
application state management with react

【讨论】：