函数内的变量集未在其他函数中定义

Question

我正在使用 react.js，我有以下代码。

function App() {

  let Submitable;

  const [values, setValues] = useState([])

 //...

  onTicket.save = () => {

    console.log(Submitable) // logs undefiened

    if (Submitable) {

      return true

    } else {

      return `Please fill out the following fields before submitting:${values.map(el => ` ${el.name}`)}`

    }

  })

  useEffect(() => {

    if (values.length === 0) {

      Submitable = true

      //enableSave

    } else {

      Submitable = false

      //disableSave

    }

  }, [values])

  return (

    <>

      ///jsx code block

    </>

  );

}

export default App;

我认为在 useEffect 函数将 Submitable 设置为 true 或 false 时，该值会传递给其他函数，但是在调用时，Submitable 记录未定义。如果我尝试将 Submitable 作为参数传递，它也会记录未定义。

Answer 1

useEffect每次渲染时都会丢失内部的分配。为了随着时间的推移保留值，将其存储在一个useRef钩子中，并将可变值保留在current属性中const Component = () =>{&nbsp; &nbsp; const submitable = useRef()&nbsp; &nbsp; useEffect(() =>{&nbsp; &nbsp; &nbsp; &nbsp; submitable.current = 'foo'&nbsp; &nbsp; },[])&nbsp; &nbsp; console.log(submitable.current) // 'foo'}