获取到useEffect钩子后，如何在Redux状态下保存响应信息

Question

我有以下情况：

export default function Names() {
const dispatch = useDispatch();
const [names, setNames] = useState([]);
const stateNames = useSelector(state => state.names);
const fetchNames = async () => {
try {
const response = await nameService.getNames();
dispatch(initNames(response.body));
setNames(response.body);
} catch (error) {
console.error('Fetch Names: ', error);
}
};

useEffect(() => {
fetchNames();
}, []);
return (
{ names.map((name, index) => (
<Tab label={ budget.label} key={index}/>
)) }
);
}

当我的组件在浏览器控制台中渲染时，我收到警告："；React Hook useEffect缺少依赖项："fetchBudgets"。要么包括它，要么删除依赖数组react hook/穷举deps"；。如果我在Redux状态下对写名称的行进行注释，则不会出现警告。我需要状态中的名称列表，以便在从外部向列表中写入新名称时可以更新列表。

export default function AddNameComponent() {
const dispatch = useDispatch();
const [label, setLabel] = useState('');
const [description, setDescription] = useState('');
const onLabelChange = (event) => { setLabel(event.target.value); };
const onDescriptionChange = (event) => { setDescription(event.target.value); };
const handleSubmit = async (event) => {
try {
event.preventDefault();
const newName = {
label: label
description: description
};
const answer = await budgetService.postNewName(newName);
dispatch(add(answer.body)); // Adding new Name in to Redux state.names
} catch (error) {
setErrorMessage(error.message);
console.error('Create Name: ', error);
}
};
return (
<div>
// Create name form
</div>
)
}

这就是一切的运作方式，但我不明白为什么我有警告。我试图在数组中添加一个依赖于us的flag。我试图通过props中的父组件传递函数"fetchNames"，并将其作为依赖项添加，但它被执行了两次。。。你能给我建议吗！

Answer 1

这只是一个esint警告，所以您不需要来修复它。但基本上，useEffect函数中使用的任何变量都应该包含在依赖数组中。否则，即使函数fetchBudgets发生更改，效果也永远不会重新运行。

它希望你的钩子看起来像

useEffect(() => {
fetchBudgets();
}, [fetchBudgets]);

其中，该效果将在组件安装时运行一次，并在fetchBudgets函数更改时再次运行(可能永远不会(。

如果它执行了不止一次，那就意味着fetchBudgets已经更改，您应该尝试弄清楚它在哪里以及为什么被重新定义。也许需要记下来？

以下是关于将函数放入依赖数组的文档。

Answer 2

感谢您的关注！我尝试了很多选择，最终找到了一个解决方案。

useEffect(() => {
async function fetchNames() {
const response = await nameService.getNames();
dispatch(init(response.body));
setNames(response.body);
}
fetchNames();
}, [dispatch, props]);

我在一个useEffect执行的依赖项数组中放入了"props"。