0

I received an error in React w/ Typescript says possiblyUndefined is possibly undefined.

So I threw it in an if statement that specifics checks that it's defined before running the function inside the body.

let [state, setState] = useState<{ foo: string }>({ foo: "" });

let possiblyUndefined: { bar: string } | undefined = { bar: "hi" };

useEffect(() => {
  // possiblyUndefined &&
  setState({ foo: possiblyUndefined.bar });
}, []);

But I still get the error.

(Note: I can't do optional chaining because I'm setting this property in a React setState object, and adding optional chaining makes things worse).

Shouldn't Typescript recognize that this function is only going to run if possiblyUndefined ISN'T undefined, therefore it should have no issue with the object property

Cjmaret
  • 142
  • 9
  • 2
    What is the type of the `possiblyUndefined`? Can you provide a [minimal reproducible example](https://stackoverflow.com/help/minimal-reproducible-example)? – wonderflame May 22 '23 at 22:03
  • hi @wonderflame, I just added the type of `possiblyUndefined` above. And that should be the MRE right there. It's just Typescript not listening to an if statement, and still thinking an object inside the if statement is undefined, when I specifically prevented that from happening. – Cjmaret May 22 '23 at 22:10
  • I don't see an error [here](https://tsplay.dev/N5xQBw). Can you include the exact error that you get? – wonderflame May 22 '23 at 22:12
  • The error is `possiblyUndefined is possibly undefined`. I've made a sandbox [MRE](https://codesandbox.io/s/react-typescript-forked-gchogv?file=/src/App.tsx). It's working as I expect it should in this instance. If you uncomment the conditional statement, it works fine, although I added that in mine and still get the error, same as in the sandbox. Not sure what could be my issue, then... – Cjmaret May 22 '23 at 22:25
  • Can you make sure that the code sandbox has the same tsconfig as you do? – wonderflame May 22 '23 at 22:26
  • In your MRE, `possiblyUndefined` is defined using `let`, plus its evaluation is performed inside the useEffect delegate, so it _can_ potentially become undefined between the initial assignment and the effect being run. Could that the the issue? – Simon MᶜKenzie May 22 '23 at 22:32
  • @SimonMᶜKenzie, no since it was mentioned that: `If you uncomment the conditional statement, it works fine, although I added that in mine and still get the error, same as in the sandbox` – wonderflame May 22 '23 at 22:33
  • 1
    @Cjmaret, I'm finding it confusing that your MRE doesn't look much like the code in your question. It's significantly more complex. Is the MRE more representative of your actual code than the code in the question is? – Simon MᶜKenzie May 22 '23 at 22:44
  • If you do manage to make a [mre] (your sandbox link apparently doesn't reproduce your issue, right? Or am I misreading these comments?) then please [edit] the post and provide it as plaintext in the question itself; an external link is a nice supplement but it doesn't suffice. Until we see a plaintext [mre] that actually reproduces the issue then it's difficult to advise. Good luck! – jcalz May 22 '23 at 23:00
  • @jcalz, yes, I apologize, I thought it was a TS problem, and so stripped away all the React stuff. My code is so complex I think it will be difficult to get an MRE to replicate the problem while I don't know what could be causing the problem. I'll give it a shot anyway, but as of now, thanks for the help everyone. – Cjmaret May 22 '23 at 23:20
  • Does this still happen if you just use a normal `if` statement, i.e. `if (possiblyUndefined) {setState(...)}`. Or maybe the type of `possiblyUndefined` is a bit more convoluted than you thought? How does `possiblyUndefined` get derived, is it through an `array.find()`? – Bao Huynh Lam May 23 '23 at 00:58

0 Answers0