设置自定义状态中的回调函数不起作用答案

【问题标题】：calback function in setCustomState not working设置自定义状态中的回调函数不起作用
【发布时间】：2021-06-11 08:13:30
【问题描述】：

我正在尝试在 setCustomState 挂钩中使用回调函数，我正在通过 API 调用设置状态值，然后获取该值并使用它进行更多 API 调用，问题是名为 的函数notTriggeredFunction，永远不会被调用，我不知道这里可能是什么问题。

我有如下：

  const [record, setRecord] = useState([])

myFunction=()=>{

        const ApiRes = await apicall()

        setRecord(ApiRes, () => {
              const arrayData = notTriggeredFunction(record) //does not get called
              
              if (arrayData.length > 0) {
                Promise.all(arrayData.map(e => fetchCurrent(e))).then(res =>
                  setRecord(
                    record => [...res, ...record],
                    () => resolve()
                  )
                )
              } else setLoading(false, () => resolve())
            })

}

我已经阅读了文档和其他问题，但似乎我可能在这里遗漏了一些东西。

【问题讨论】：

setRecord 状态更新器函数只接受一个参数，可以是用于更新状态的值，也可以是使用前一个状态并返回下一个状态值的函数。传递的任何额外参数都将被忽略。你想做什么？在record 状态更新后调用该函数？
感谢您的解释，您说得对，我正在尝试确保在执行以下逻辑之前更新状态，我想我可以找到使用 useEffect 或类似的解决方法，但只是我想了解我做错了什么，再次感谢您的澄清

标签： reactjs callback react-hooks

【解决方案1】：

setRecord 状态更新器函数只接受一个参数，可以是用于更新状态的值，也可以是使用前一个状态并返回下一个状态值的函数。传递给它的任何额外参数都会被忽略。

与基于类的组件的setState 回调等效的功能组件是更新状态并使用依赖于状态的useEffect 来发出副作用。这是componentDidUpdate 的同义词。

在myFunction 回调中更新record 状态，并使用依赖于record 状态更新的useEffect 挂钩来发出额外的副作用。

const [record, setRecord] = useState([]);

myFunction = async () => {
  const ApiRes = await apicall();
  setRecord(ApiRes);
}

useEffect(() => {
  const arrayData = shouldBeTriggeredFunction(record);
          
  if (arrayData.length > 0) {
    Promise.all(arrayData.map(e => fetchCurrent(e)))
      .then(res => {
        setRecord(record => [...res, ...record]);
      });
  } else {
    setLoading(false);
  }
}, [record]);

但是，如果效果更新其依赖数组中的相同状态，这将创建一个无限循环。您还必须添加额外的条件测试（该条件取决于您），或使用额外的状态依赖项，例如 doFetchCurrent 或类似的东西用作条件保护，这样您就不会呈现循环。

【讨论】：