javascript - 如何在传递给另一个组件的函数中获取 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”传递 ref 的每个对象，用于管理输入值。

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

为什么不用柯里化(Currying)函数？

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

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

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