reactjs - 子组件未在 React.js 功能组件中更新父级的状态
问题描述
我有一个呈现子组件的组件。子组件管理自己的状态,我试图使用回调将更新的状态传递给父组件,但没有成功。我已经尝试了几个小时来确定问题,但无法弄清楚。我的父组件是这样的(没有导入):
const formReducer = (state, action) => {
switch (action.type) {
case 'SET_CATEGORY':
return {
category: action.category
};
default:
return state;
}
};
function LogService() {
const initialFormState =
{
category: ''
};
const [formState, dispatch] = useReducer(formReducer, initialFormState);
const getCategoryState = useCallback(category => {
dispatch({
action: 'SET_CATEGORY',
category: category
}, []);
}
);
const submitHandler = event => {
event.preventDefault();
console.log(formState);
};
return (
<>
<form onSubmit={submitHandler}>
<CategoryOne sendState={getCategoryState} />
<button>send</button>
</form>
</>
);
};
export default LogService;
这是我的子组件:
const selectionReducer = (state, action) => {
switch (action.type) {
case 'DISPLAY_SELECTION':
return {
...state,
selectionIsVisible: true
};
case 'LOG_SELECTION':
return {
...state,
category: action.category,
selectionIsVisible: false
}
default:
return state;
}
};
function CategoryOne(props) {
const [selectionState, dispatch] = useReducer(selectionReducer, {});
const { category } = selectionState;
const { sendState } = props;
useEffect(() => {
sendState(category);
}, [category, sendState])
const displaySelectionHandler = event => {
dispatch({
type: 'DISPLAY_SELECTION'
});
};
const selectCategoryHandler = event => {
dispatch({
type: 'LOG_SELECTION',
category: event.target.id
});
};
return (
<>
<div className="container">
<div className={`options-container ${selectionState.selectionIsVisible && 'active'}`}>
<div className="option">
<input className="radio" type="radio" id="One" name="category" onChange={selectCategoryHandler} />
</div>
<div className="option">
<input className="radio" type="radio" id="Two" name="category" onChange={selectCategoryHandler} />
</div>
<div className="option">
<input className="radio" type="radio" id="Three" name="category" onChange={selectCategoryHandler} />
</div>
<div className="option">
<input className="radio" type="radio" id="Four" name="category" onChange={selectCategoryHandler} />
</div>
</div>
<div className="selected" id="category" onClick={displaySelectionHandler}>
Category
</div>
</div>
</>
);
};
export default CategoryOne;
我没有收到错误,只是一个警告:
React Hook useCallback does nothing when called with only one argument. Did you forget to pass an array of dependencies?
我不明白那个警告,我确实有一系列依赖项。除此之外, selectionIsVisible: true (在“DISPLAY_SELECTION”操作中)有效,但 selectionIsVisible: false (在“LOG_SELECTION”操作中)。
有人可以帮我吗?我很沮丧。
解决方案
因为使用放[]
错了地方。只需像这样更新:
const getCategoryState = useCallback((category) => {
dispatch({
action: "SET_CATEGORY",
category: category,
});
}, []);
推荐阅读
- android - 在Android上从相机意图获取图像
- reactjs - React Native 中的 i18next:import {t} 不起作用(在 React Web 中有效)
- debugging - 使用 elm reactor 时是否可以显示 Elm 的调试器?
- java - 如何在 Java 中使用 Rest-assured 来使用多部分文件附件?
- facebook - Graph API:是否可以在我也是成员的 Facebook 群组中获取 Facebook 成员的姓名和位置?
- java - 如何从 javafx 中的切换按钮获取文本
- html - 将 SVG 元素放在另一个元素上
- javascript - 在 JavaScript 中将时间“1hr 30m 4s”解析为提前时间
- android - React Native:来自多个域的 Axios 网络错误
- javascript - 如何使用 redux 从数据库中删除数据?