抱歉,这看起来像是重复的,但我找不到可以为我指明正确方向的答案。
以下是我认为相关的部分代码。抱歉,如果我错过了任何内容。
function Packages(){
const [height, setHeight] = useState(0);
const [width, setWidth] = useState(0);
const [depth, setDepth] = useState(0);
const [maxWeight, setMaxWeight] = useState(0);
const [packageName, setPackageName] = useState('');
const [packageId, setPackageId] = useState(null);
const toggleActive = useCallback(() => setActive((active) => !active), []);
function loadEdit(index){
toggleActive();
let packageInfo = packages[index];
setHeight(packageInfo.height);
console.log('height', height);
setWidth(packageInfo.width);
setDepth(packageInfo.depth);
setMaxWeight(packageInfo.maxWeight);
setPackageName(packageInfo.packageName);
setPackageId(packageInfo.id);
}
<div style={{height: '500px'}}>
<Modal large open={active} onClose={toggleActive} title="Create New Package"
primaryAction={{
content: 'Create',
onAction: createNewPackage,
loading: btnLoadingState
}}
secondaryActions={[
{
content: 'Cancel',
onAction: toggleActive,
},
]}
>
<Modal.Section>
<Stack vertical>
<TextField label="Package Name" value={packageName} onChange={setPackageName} autoComplete="off" />
<TextField label="Height in CM" value={height} onChange={setHeight} autoComplete="off" />
<TextField label="Width in CM" type="number" value={width} onChange={setWidth} autoComplete="off" />
<TextField label="Depth in CM" type="number" value={depth} onChange={setDepth} autoComplete="off" />
<TextField label="Max Weight in Grams" type="number" value={maxWeight} onChange={setMaxWeight} autoComplete="off" />
</Stack>
</Modal.Section>
</Modal>
</div>
}
export default Packages;
我的问题:当从代码的另一部分调用 loadEdit 函数时,它应该加载代码中显示的 Modal,并预先设置了文本框。我可以确认 packageInfo 变量已加载相关对象,并且引用的每个属性都存在并具有值。我遇到的问题是,当模式弹出时,只有“packageName”变量有值。如果为空,则其他所有内容。
只有一个变量的值是如何预填充的。我什至将数字硬编码到 setState 方法中。但没有成功。任何帮助是极大的赞赏。