Question

我正在尝试制作锻炼跟踪器，并且正在使用hooks和useState。我有一个名为item-exercise的组件，其中有一个2字段“表单”以添加带有权重和次数的新集合。当用户单击“添加”按钮时，它将添加到Firebase数据库中，然后将状态设置为所有空字符串。

这是功能：

const [newSet, setNewSet] = useState({
    weight: '',
    reps: '',
    count: 1
});

const handleAddNewSet = () => {
    const setNotation = `${newSet.count}=${newSet.weight}+${newSet.reps}`;

    addNewSet(id, workoutId, name, setNotation);

    setNewSet({
        ...newSet,
        weight: '',
        reps: '',
        count: newSet.count + 1
    })
}

<div className="item-set">
    <ClassicButton onClick={handleAddNewSet}>Add</ClassicButton>
    <input type="text" placeholder="Weight" name="weight" onChange={(event) => handleChangeNewSet(event)} value={newSet.weight} />
    <input type="text" placeholder="Reps" name="reps" onChange={(event) => handleChangeNewSet(event)} value={newSet.reps} />
</div>

AddNewSet（）函数工作正常，它会按需添加集合。问题在于，在添加设置并设置状态后，它不会重新渲染组件，刷新页面会使集合出现，但是我希望它重新渲染组件，因为它不应该消耗太多数据并保持移动友好。在输入更改时设置状态的函数使其可以重新呈现（我尝试了console.log（），并在每次按键输入后记录日志）。所以我不知道是什么使useState再次呈现该组件，有什么提示吗？

谢谢！

Answer 1

您可以尝试将newSet作为useEffect中的依赖项参数添加吗

  useEffect(() => {
        fetchSets(id, workoutId, name);
    }, [newSet])

设置新状态不会使用React Hooks重新渲染组件

1 个答案: