使用上下文API管理状态

Question

我正在重构一些代码，因为我必须进行的道具钻取量太大，无法管理，所以我将借此机会了解Context API，但我不明白为什么状态没有按照我预期的方式运行。。。这是我的上下文文件：

import React,{useState, createContext} from 'react';
export const MileContext = createContext();
export const MileProvider = props => {
const [totalMiles, setTotalMiles] = useState(0);
const [drivers, setDrivers] = useState(1);
return (
<MileContext.Provider 
value = {
[totalMiles, setTotalMiles], 
[drivers, setDrivers]
}>
{props.children}    
</MileContext.Provider>
)
}

当我更改另一个组件的totalMiles，然后更改另一组件的驱动程序时，它们似乎共享一个值。。。这是另外两个组成部分。

import React, {useState, useContext} from 'react';
import "./main.css";
import { MileContext } from './MileContext';

const TotalDrivers = () => {
const [drivers, setDrivers] = useContext(MileContext);
const onDriverChange = (event) => {
setDrivers(event.target.value)    
};
return(
<div>
<p>Total Drivers</p>
<label>
<select value={drivers} onChange={onDriverChange}>
<option value="1">1</option>
<option value="2">2</option>
</select>
</label>
</div>
)
}
export default TotalDrivers;
import React, {useState, useContext} from 'react';
import "./main.css";
import {PRESETS} from "./presets";
import { MileContext } from './MileContext';

const PresetSelector = () => {
const [totalMiles, setTotalMiles] = useContext(MileContext);
const onTotalMileChange = (event) => {
setTotalMiles(event.target.value)    
};
return(
<div>
<label>
<h3>Select a preset for your trip (these are round trips from the warehouse and back)</h3>
<select onChange={onTotalMileChange}>
<option value="0">Custom Trip</option>
{
Object.entries(PRESETS).map(([campus, mileage]) => (
<option key={campus} value={mileage}>
{campus}
</option>
))} 
</select>
</label>
trip total miles = {totalMiles}
</div>
)
}
export default PresetSelector;

我觉得我快要弄清楚了，但我所有的谷歌搜索都失败了。我肯定只是误解了什么，或者没有使用正确的语法。你能帮我了解如何解决这个问题吗？我有很多其他组件和状态值要添加到这个应用程序中。哦，我把它们包装在app.js里，就像这样：

return (
<MileProvider>
<Header />
<form>
<PresetSelector />
<TotalDrivers />
</form>
</MileProvider>
);
}

Answer 1

您在对象内部传递元组时没有任何键，这是一种无效语法。

将值传递给上下文提供程序时，只需将值作为对象提供即可。

<MileContext.Provider 
value = {{
totalMiles, 
setTotalMiles, 
drivers, 
setDrivers
}}>
{props.children}    
</MileContext.Provider>

在TotalDrivers组件中的使用：

const {drivers, setDrivers} = useContext(MileContext);

在PresetSelector组件中的使用

const {totalMiles, setTotalMiles} = useContext(MileContext);