如何在传递给另一个组件的函数中获取useState变量的值

Question

描述问题的最好方法是我的代码：

function EstateParamsList({ estateType, category }) {
  const [isLoading, setIsLoading] = useState(true)
  const [params, setParams] = useState({})
  const [showPopUp, setShowPopUp] = useState(false)

  useEffect(() => {
    if (category && typeof category.id !== undefined) {
      return db.collection(`dictionaries/ESTATE_PARAMS/${estateType}/${category.id}/params`).onSnapshot(response => {
        const paramsObject = {}
        response.forEach(param => {
          paramsObject[param.id] = {
            ...convertParamObjetcToFieldsConfig(param.data()),
            change: fieldChangedHandler
          }
        })
        setParams(paramsObject)
        setIsLoading(false)
      })
    } else {
      setIsLoading(false)
    }
  }, [category])
 console.log(params)
  const fieldChangedHandler = (event, fieldIdentifier) => {
    if(params)
      console.log(params)
  }

所以我有 params 变量，该变量与对象初始化，并且我正在从Firebase异步。您可以在 useEffect方法中看到初始化的实现。对于每个对象，我都希望为函数“ fieldChangedHandler”传递引用，以管理输入值。

fieldChangedHandler 是我的 EstateParamsList 的一种方法。但是我无法获得 params的价值！

问题为何？我只在渲染完所有内容并完成异步请求后才调用fieldChangedHandler。

下面是参数的控制台日志。为什么在func中为空的 params ？

通话：

const renderParamsAsFields = params => {
  const fields = []
  for (const key in params) {
    fields.push(<Field {...params[key]} changed={event => params[key].change(event, key)} />)
  }
  return fields.length ? fields : <div className='EstateParamsManager-EmptyValues'>Нет параметров</div>
}

Answer 1

为什么不使用咖喱函数？

const createFieldChangedHandler = (
  params,
  fieldIdentifier
) => event => {
  if (params) console.log(params);
};

function EstateParamsList({ estateType, category }) {
//... other code
  useEffect(() => {
    //...other code
    change: createFieldChangedHandler(
       paramsObject,
       param.id
    ),
    //...other code
   }, [category, estateType]);//fixed missing dependency

当您调用change函数时，您应该已经在范围内拥有正确的值：

<Field {...params[key]} changed={params[key].change} />