gpt4 book ai didi

reactjs - 在 React 组件中结合 useState 钩子(Hook)

转载 作者:行者123 更新时间:2023-12-04 18:29:59 26 4
gpt4 key购买 nike

我最近开始大量使用 React Hook。

使用“React.useState”时,状态管理对我来说似乎更直观。

无论如何,虽然它工作正常,但我知道随着我开始保存到状态的值越多,它开始变得困惑。

例如,随着我的汽车零部件应用的发展,它现在看起来像这样:

const [isShown, setIsShown] = React.useState(false);
const [idVal, setIdValue] = React.useState(false);
const [partNameVal, setPartNameValue] = React.useState(false);
const [engineEngineEngineTypeVal, setEngineEngineTypeValue] = React.useState(false);
const [displacementVal, setDisplacementValue] = React.useState(false);
const [makeVal, setMakeValue] = React.useState(false);
const [countryVal, setCountryValue] = React.useState(false);

const hide = () => setIsShown(false);

const show = (id, partName, engineEngineType, displacement, department, country) => {
setIsShown(true);
setIdValue(id);
setPartNameValue(partName);
setEngineTypeValue(engineEngineType);
setDisplacementValue(displacement);
setMakeValue(department);
setCountryValue(country);
}

<p>ID: {idVal}</p>
<p>PartName: {partNameVal}</p>
<p>EngineType: {engineEngineTypeVal}</p>
<p>Displacement: {displacementVal}</p>
<p>Make: {makeVal}</p>
<p>Country: {countryVal}</p>

我想知道是否有办法让它更具可读性,但仍然非常直观。

谢谢!

最佳答案

通常您想要处理单个对象或使用 useReducer ,类似于:

const INITIAL_CAR = {
id: 0,
part: "4xE3",
country: "USA",
// ... More entries
};

const CarApp = () => {
const [car, setCar] = useState(INITIAL_CAR);
const [isShown, setIsShown] = useState(false);

const show = (carProps) => {
setIsShown(true);
setCar(carProps);
};

const { id, part, engine, displacement, make, county } = car;

const updateCountry = (country) =>
setCar((prevCar) => ({ ...prevCar, country }));

const updateCarProperty = ({ property, value }) =>
setCar((prevCar) => ({ ...prevCar, [property]: value }));

return (
<div>
{isShown && (
<>
<p>ID: {id}</p>
<p>PartName: {part}</p>
<p>EngineType: {engine}</p>
<p>Displacement: {displacement}</p>
<p>Make: {make}</p>
<p>Country: {country}</p>{" "}
</>
)}
// use show, updateCountry, updateProperty etc.
</div>
);
};

关于reactjs - 在 React 组件中结合 useState 钩子(Hook),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/61325890/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com