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

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

上面的代码可以在代码沙箱中进行测试。

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

Answer 1

useState参数只使用一次。

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

但是，如果您想这样做，则需要利用useEffect

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

更新的演示