如何进行功能更新？

Question

我有一个连接到 Firebase 的 React 应用程序，用于身份验证和存储。 每个用户可以拥有多组颜色和多组符号； 这些用于创建“盒子”。 每个 Box 都有一组颜色和一组符号。

“创建框”表单向用户显示他们所有的颜色集和符号集，并在下拉列表中列出。 用户可以 select 从下拉菜单中为其新 Box 设置颜色集和符号集。

首先显示空白表单，然后我使用“useEffect”连接到 firebase 以获取用户的颜色集和符号集列表。 检索到每个列表后，将填充下拉列表，并选择默认颜色集和符号集。

该组件如下所示：

    const initialFormData = Object.freeze({
      boxname: "",
      colourSet: "",  // Colour set to use for this Box - initially unset
      symbolSet: ""   // Symbol set to use for this Box - initially unset
    })

    const CreateBox = (props) => {
    
      const [colourSets,        setColourSets       ] = useState("") // List of colour sets
      const [symbolSets,        setSymbolSets       ] = useState("") // List of symbol sets
      const [formData,          updateFormData      ] = useState(initialFormData)
    
      const context = useContext(AuthUserContext)

      useEffect(() => {
    
        // Get all colour sets by signed-in user
        props.firebase.colourSetsByUser(context.uid).get().then(querySnapshot => {

        let coloursets = []
        querySnapshot.forEach(function(doc) {

          let colourSet = { // Store colour set id and name
            id: doc.data().key,
            name: doc.data().name
          }
    
          coloursets.push(colourSet) // Add this colour set to coloursets array

          if(doc.data().isDefault) { // Automatically select the default colour set
            updateFormData({ ...formData, colourSet: colourSet.id})
          }
    
       })

       setColourSets(coloursets) // Add coloursets array to the state variable, colourSets

     })

     ... same thing for symbol sets ...
    
  }, [context.uid, props.firebase]);


  return (
    <div className="componentContent createChart">
      <h1>Create Chart</h1>
      <form className="innerForm createChartForm" noValidate autoComplete="off" >
        <TextField
          className="textField createChartTextField chartDescriptionTextField"
          variant="outlined"
          margin="normal"
          fullWidth
          name="boxname"
          value={formData.boxname}
          onChange={handleFormChange}
          label="Box Name"
          placeholder="Box Name"
          id="boxname" />
          <Grid container>
            <Grid item xs={2} className="marginTopFormItem">
              <InputLabel
                id="selectColourSetLabel"
                className="selectLabel">Colour Set</InputLabel>
            </Grid>
            <Grid item xs={10} className="marginTopFormItem">
            {
              formData.colourSet && colourSets
              ?
                <Select
                  labelId="selectColourSetLabel"
                  id="selectColourSet"
                  fullWidth
                  className="selectBox selectWithLabel"
                  value={formData.colourSet || null}
                >
                {
                  colourSets.map(
                        (item) => <MenuItem key={uuidv4()} value={item.id}>{item.name}</MenuItem>)
                }
                </Select>
              : null
            }
            </Grid>
            
            ... same thing for symbol set selector ...

          </Grid>
          <Button
            type="submit"
            fullWidth
            margin="normal"
            variant="contained"
            color="secondary"
            className="formButton marginTopFormItem"
          >Create</Button>
      </form>
    </div>
  )

}

export default withFirebase(CreateChart);

我遇到的问题是这会发出警告：

React Hook useEffect has a missing dependency: 'formData'. Either include it or remove the dependency array. You can also do a functional update 'updateFormData(f => ...)' if you only need 'formData' in the 'updateFormData' call

如果我在依赖项数组中包含 formData，则会重复调用 useEffect function，从而有效地冻结应用程序。 如果我删除依赖数组，同样的事情会发生。 我只能通过将 formData 排除在依赖项数组之外来防止无限循环，所以我假设我需要进行功能更新，但我不确定在这种情况下是什么。 我在网上找到了一些示例，但它们适用于更简单的案例，我无法弄清楚如何将它们扩展到我需要的地方。

Answer 1

从依赖于 state 的效果更新 state 将始终导致无限循环。

尝试对更新 function 使用 lambda 语法，这样效果就不必关闭formData 。

updateFormData(prevFormData => ({ ...prevFormData, colourSet: colourSet.id }));

编辑：

扩展正确使用钩子，看起来你可以稍微简化你的效果：

    useEffect(() => {
      const defaultDoc = colourSets.find(doc => doc?.isDefault);
      updateFormData(p => ({ ...p, colourSet: defaultDoc.id }));
    }, [colourSets]);

    useEffect(() => {
      props.firebase.colourSetsByUser(context.uid).get().then(querySnapshot => {
        setColourSets(querySnapshot.val().map(({ key, name, isDefault }) => ({ id: key, name, isDefault })));
      });
    }, [context.uid, props.firebase]);

Answer 2

这是来自 React 的 lint 警告。 通常，将您在挂钩中使用的所有依赖项包括在内是一个很好的做法，因为您在其中依赖于它们。 在特殊情况下，最常见的一种是仅在挂载时运行 useEffect 并将数组留空，忽略依赖项是可以的。 只需删除数组上方的注释警告

// eslint-disable-next-line react-hooks/exhaustive-deps

它认为这会很好，特别是如果您正在与其他人一起工作以包含注释为什么您选择忽略某些依赖项，这样他们就不会再次绊倒它。