React 无法从不同组件的函数体内更新组件

Question

我用 Formik 和 react-reaflet 制作了一个表单，当用户点击按钮时，会出现一张带有预定义经度和纬度的地图，他可以在地图上导航并通过拖动光标自动更改其位置。

该功能按预期运行，但是当我单击光标更改位置时，React 在控制台中向我显示此错误 警告：渲染时无法更新组件 (Main)不同的组件 (Formik).。我试图解决它，但它仍然不起作用。我创建了这个 sandbox 这样你就可以看到错误是如何出现在控制台上的

Answer 1

问题出在components/mapper.jsln:12。

你做到了：

setLatitude(latitude);
setLongitude(longitude);

就在渲染函数中。为什么要这样做？

Answer 2

只是为了概括@hackape 所说的，当使用功能组件时，不要在组件的主体上直接使用 setState（您需要在定义上初始化状态或用 useEffect 包装它/其他可调用函数)

示例：

function MyComponent(props){
  const [state, setState] = useState(0)

  setState(5) // This is BAD

  return <View />
}

解决方案：

function MyComponent(props){
  const [state, setState] = useState(5) // This is good

  return <View />
}

// -------- OR ---------
function MyComponent(props){
  const [state, setState] = useState(0)

  useEffect(()=>{
    setState(5) // This is good
  },[])

  return <View />
}

React 无法从不同组件的函数体内更新组件

React Cannot update a component from inside the function body of a different component

javascript

reactjs

formik