反应自定义钩子没有从另一个自定义钩子接收值的当前状态

时间:2019-06-18 16:15:20

标签: reactjs react-hooks

我有一个事件处理程序,用于将列表中的选定值设置为[values, setValues]状态挂钩。完成此操作后,我有了一个useEffect钩子,该钩子调用一个[options, setOptions]状态钩子将该值设置为options值。但是,尽管setValues可以设置状态(如我console.log所示,但是setOptions不能将新的values状态设置为options状态

更新

console.log(options.data)移出效果可以部分解决此问题,因为它会注销当前值,但是,返回该值并在另一个自定义钩子中使用它会返回默认值options。我已经更新了代码。

我尝试使用useRef来获取当前值,但是我的实现无法正常工作。也许我做错了。

   const useFirstCustomHook = () => {
   const [options, setOptions] = useState({
        data: null
    })

    const [values, setValues] = useState({
        name: "",
        myid: "my-id"
    });

    //state changer
    function handleChange(event, id) {
        setValues(oldValues => ({
          ...oldValues,
          name: event.target.value,
          myid: id.props.id,
        }));
      }

      useEffect(() => {
        setOptions({
            data: values
        })

      },[values])
      console.log(options.data) //not printing the current state
     return {
       options
     }
   }
   export default useFirstCustomHook 
   const [waitState, setWait] = useState(0)
   const { values, options } = useFirstCustomHook ()

   useEffect(() => {
      console.log(options)
      let wait = () => {
            setTimeout(() => setWait(waitState+1), 10000)
        }

      async function fetchData() {
        //fetch some data then wait
        wait()
      }

   },[wait])
   export default useFetchedData

我希望options的新状态与values的当前值相同,但仅反映默认值。

0 个答案:

没有答案