小编pep*_*969的帖子

我有一个父组件，它根据 useReducer 中名为 state.viewOption 的状态选择要渲染的视图。

调度它的子组件类似于：

export default function SearchFilter({ placeholder, onSearch }) {

    const [state, dispatch] = useReducer(
        collectionListReducer,
        initialCollectionState
    );

const option = state.viewOption;
  
    const handleChange = e => dispatch(setSketchesTrendsOption(e.target.value));

    return (
 <Grid container>
            <Grid item className={classes.selector}>
                <TextField
                    select
                    id="sketches-trends-selector"
                    value={option}
                    onChange={handleChange}
                >
                    <MenuItem value="Sketches">{t('TR_SKETCHES')}</MenuItem>
                    <MenuItem value="Trends">{t('TR_TRENDS')}</MenuItem>
                </TextField>
            </Grid>
   );
}

然后我想根据这个状态选择视图选项的父组件是这样的：

export default function CollectionListOption() {
    const [state, dispatch] = useReducer(
        collectionListReducer,
        initialCollectionState
    );

const viewOption = state.viewOption;

 useEffect(() => {

        console.log('view option in useEffect', viewOption);

    }, …