React - 状态不使用 useReducer 更新

Question

我想将呈现的列表项的高度放入存储在父组件中的数组中。它看起来相当简单，但仍然不起作用。从我在调试时看到的情况来看，调度被触发并且 reducer 收到 action，但状态仍然是空数组。

ArticlesMenu.js

import React, { useRef, useState, useEffect, useReducer } from 'react';
import ArticlesMenuItem from './ArticlesMenuItem';

    const reducer = (state, action) => {
        console.log('action', action)
        switch (action.type) {
            case 'add-height': 
                return [...state, action.payload];
            default:
                return state
        }
    }
    
    const ArticlesMenu = ({ articleItems }) => {
        const initialState = [0];
        const [state, dispatch] = useReducer(reducer, initialState);
        const [height, setHeight] = useState('auto'); 
        const renderArticles = () => {
            return articleItems && articleItems.items.map((item, index) => {
                return (
                    <ArticlesMenuItem 
                        path={item.path}    
                        height={height}
                        label={item.label}
                        key={item.id}
                        getHeights={(refHeight) => {
                            console.log('refHeight', refHeight)
                            dispatch({type: 'add_height', payload: refHeight})
                        }}
                    />
                )
            });
        }
    
        console.log('state', state)
    
        return (
            <div id="articles" className="clearfix">
                <h2 className="articles__heading">{articleItems && articleItems.heading}</h2>
                <ul className="articles__list">
                    {renderArticles()}
                </ul>
            </div>
        )
    }
    
    export default ArticlesMenu

ArticlesMenuItem.js

import { useRef, useEffect, useState } from 'react';
import { Link } from 'react-router-dom';

const ArticlesMenuItem = ({ path, id, label, height, getHeights}) => {
    const ref = useRef();

    useEffect(() => {
        getHeights(ref.current.clientHeight)
    },[])

    return (
        <li className="articles__item" ref={ref} style={{height: height}}>
            <Link to={path} className="articles__link" >{label}</Link>
        </li>
    )
}

export default ArticlesMenuItem;

Answer 1

你的调度动作类型是 'add_height' 但在你的减速器中动作类型是 'add-height' 所以使用默认的方式 return 状态和你的初始状态是一个空数组。您需要为与 reducer 注释相同的字符串更改分派操作类型。为了不重现此错误，请使用引用（const ADD_HEIGHT_ACTION = 'add-height' 并在 reducer 和 dispatch 上使用。

React - 状态不使用 useReducer 更新

React - state does not update with useReducer

reactjs

use-reducer