组件不呈现最新的值?

Question

我已经习惯redux了。我的问题是itemList正确渲染最新值，但从钩子状态的复选框的值没有得到最新值。它应该检查所有项目列表，但它不是。虽然我在map函数中console.log的值，它仍然得到最新的值和find函数是正确的。

export default function Component(props) {
const dispatch = useDispatch();
const { itemList } = useSelector((state) => state.AllCourses);
const [values, setValues] = useState({
all: true,
items: []
});
useEffect(() => {
dispatch(
someActions.getItemList(payload)
); //this will get latest itemList
}, []);
useEffect(() => {
if (itemList.length) {
const newValues = {
all: true,
items: itemList.map((item) => ({
select: true,
id: item.id,
})),
};
setValues(newValues);
}
}, [itemList]);
return (
<Box ml={4}>
{ itemList?.map((item) => {
return (
<Box key={item.id}>
<Checkbox
name={item.name}
value={values?.items?.find((itemVal) => item.id === itemVal.id)?.select}
/>
</Box>
);
})}
</Box>
);
}

尝试了几个解决方案，但仍然不正确

Answer 1

看起来你正在使用Material UI。对于复选框组件，你需要设置被选中的道具。

import Checkbox from '@mui/material/Checkbox';
const label = { inputProps: { 'aria-label': 'Checkbox demo' } };
export default function Checkboxes() {
return (
<div>
<Checkbox {...label} defaultChecked />
<Checkbox {...label} />
<Checkbox {...label} disabled />
<Checkbox {...label} disabled checked />
</div>
);
}

如果你使用带有checkbox类型的html输入标签，那么你必须相应地设置checked属性，见下文。

<label for="vehicle2"> I have a car</label><br>
<input type="checkbox" name="vehicle3" value="Boat" checked>

最后，在你的例子中不需要本地状态你可以删除

const [values, setValues] = useState({
all: true,
items: []
});

和

useEffect(() => {
if (itemList.length) {
const newValues = {
all: true,
items: itemList.map((item) => ({
select: true,
id: item.id,
})),
};
setValues(newValues);
}
}, [itemList]);

并替换为

const values = {
all: true,
items: itemList && itemList.length ? itemList.map((item) => ({
select: true,
id: item.id,
})) : [],
};