javascript - Return value is not iterable - Stack Overflow

admin管理员组

文章数量:1403461

function useState(initVal){
  const state = initVal 
  const setState = (newVal) => {
    state = newVal
  }

}
const [state,setState] = useState(0)
console.log(state)
TypeError: useState is not a function or its return value is not iterable
    at /home/runner/ViciousSqueakyProfessionals/index.js:8:26
    at Script.runInContext (vm.js:130:18)
    at Object.<anonymous> (/run_dir/interp.js:209:20)
    at Module._pile (internal/modules/cjs/loader.js:1137:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1157:10)
    at Module.load (internal/modules/cjs/loader.js:985:32)
    at Function.Module._load (internal/modules/cjs/loader.js:878:14)
    at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:71:12)

I can't seem to figure out why i need the return value to be iterable can someone throw some light over return method in all ;-;

function useState(initVal){
  const state = initVal 
  const setState = (newVal) => {
    state = newVal
  }

}
const [state,setState] = useState(0)
console.log(state)
TypeError: useState is not a function or its return value is not iterable
    at /home/runner/ViciousSqueakyProfessionals/index.js:8:26
    at Script.runInContext (vm.js:130:18)
    at Object.<anonymous> (/run_dir/interp.js:209:20)
    at Module._pile (internal/modules/cjs/loader.js:1137:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1157:10)
    at Module.load (internal/modules/cjs/loader.js:985:32)
    at Function.Module._load (internal/modules/cjs/loader.js:878:14)
    at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:71:12)

I can't seem to figure out why i need the return value to be iterable can someone throw some light over return method in all ;-;

• javascript
• reactjs
• function

Share Improve this question Follow edited Nov 4, 2020 at 4:13 kmoser 9,31833 gold badges2626 silver badges4444 bronze badges asked Nov 4, 2020 at 4:07 mooy botmooy bot 8611 silver badge88 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

As you are calling the useState function and using array destructuring on the return value of the function that is why you need you return the array first in the method itself.

You need to return values as array, Also change state to let for reassigning:

function useState(initVal){
  let state = initVal 
  const setState = (newVal) => {
    state = newVal
  }

  return [state, setState];
}

You can use these value in either ways:

const [state, setState] = useState(0);

// or
const value = useState(0);
value[0] // = state
value[1]() // = setState()

The main reason between this and the actual useState hook is that change the state value won't take ponent to rerender.

Maybe, it looks like react "useState" hook.

"useState" hook has a one arguments and return array(first one is value, second one is function - change value).

[Yours]
function useState(initVal){
  const state = initVal 
  const setState = (newVal) => {
    state = newVal
  }

}
const [state,setState] = useState(0) // error - because you are not return any.
console.log(state)

[Correct]

function useState(initVal){
  const state = initVal 
  const setState = (newVal) => {
    state = newVal
  }

  return [state, setState]

}
const resultOfUseState = useState(0);
console.log(resultOfUseState);
console.log(resultOfUseState[0]);
console.log(resultOfUseState[1]);

Maybe, you can understand!

Also, It is possible "resultOfUseState" to const [state, setState] = useState. ( resultOfUseState[0] = state, resultOfUseState[1] = setState )

It calls destructuring.

本文标签： javascriptReturn value is not iterableStack Overflow