我想將渲染串列項的高度放入存盤在父組件中的陣列中。它看起來相當簡單，但仍然無法正常作業。從我在除錯時看到的情況來看，調度被觸發并且reducer 接收到action，但是狀態仍然是空陣列。
文章Menu.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
文章MenuItem.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;
uj5u.com熱心網友回復：
您的調度操作型別是“add_height”，但在您的減速器中，操作型別是“add-height”，因此使用回傳狀態的默認方式和初始狀態是一個空陣列。您需要更改與 reducer 注釋相同的字串的調度操作型別。為了不重現此錯誤，請使用參考 (const ADD_HEIGHT_ACTION = 'add-height' 并在減速器和調度上使用。
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/428958.html
下一篇：使用React-Hook-Form和Yup驗證檔案（<x>必須是`object`型別，但最終值為：`null`）