使用上下文值作为初始状态值 - 反应挂钩

Question

我们可以使用上下文值来启动功能组件内的状态变量吗？

我在这里尝试使用上下文中的值启动组件状态。但是状态不会在上下文值更改时更新。


function Parent() {
  return (
    <ContextProvider>
      <Child />
    </ContextProvider>
  );
}

function Child() {
  const mycontext = useContext(Context);
  const [items, setItems] = useState(mycontext.users);
  console.log(mycontext.users, items); //after clicking fetch, => [Object, Object,...], [] both are not equal. why??????

  return (
    <>
      <button onClick={() => mycontext.fetch()}>fetch</button>
      {/* <button onClick={()=>mycontext.clear()} >Clear</button> */}
      {items.map(i => (
        <p key={i.id}>{i.name}</p>
      ))}
    </>
  );
}
/* context.js */
const Context = React.createContext();
function ContextProvider({ children }) {
  const [users, setUsers] = useState([]);

  function fetchUsers() {
    fetch("https://jsonplaceholder.typicode.com/users")
      .then(response => response.json())
      .then(json => setUsers(json));
  }

  return (
    <Context.Provider
      value={{ users, fetch: fetchUsers, clear: () => setUsers([]) }}
    >
      {children}
    </Context.Provider>
  );
}

以上代码可以在codesandbox.

中测试

我可以直接使用上下文值，但我想在组件内部维护状态。如果我们不能用上下文值启动状态值，如果我想从上下文中获取数据并且还想在内部维护状态，最好的方法是什么？

Answer 1

useState的参数只用了一次。

您不需要复制状态中的上下文值，可以直接从上下文中使用它。

如果您想这样做，您需要使用 useEffect

const [items, setItems] = useState(mycontext.users);

useEffect(() => {
    setItems(mycontext.users);
}, [mycontext.users]);

updated demo

使用上下文值作为初始状态值 - 反应挂钩

use context value as initial state value - react hooks

reactjs

react-hooks

use-context