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

使用上下文值作为初始状态值-react hooks

1 个答案: