skip to Main Content

Is this a bug in React, or am I missing something?? I have an object which has a base64 string.

const [ state, updateState ] = useState({ base64: "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CiAgICAgICAgICAgIHhtbG5zOmV4aWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20vZXhpZi8xLjAvIgogICAgICAgICAgICB4bWxuczp0aWZmPSJodHRwOi8vbnMuYWRvYmUuY29tL3RpZmYvMS4wLyI+CiAgICAgICAgIDxleGlmOlBpeGVsWERpbWVuc2lvbj4zNDwvZXhpZjpQaXhlbFhEaW1lbnNpb24+CiAgICAgICAgIDxleGlmOlVzZXJDb21tZW50PlNjcmVlbnNob3Q8L2V4aWY6VXNlckNvbW1lbnQ+CiAgICAgICAgIDxleGlmOlBpeGVsWURpbWVuc2lvbj4zNDwvZXhpZjpQaXhlbFlEaW1lbnNpb24+CiAgICAgICAgIDx0aWZmOlJlc29sdXRpb25Vbml0PjI8L3RpZmY6UmVzb2x1dGlvblVuaXQ+CiAgICAgICAgIDx0aWZmOllSZXNvbHV0aW9uPjE0NDwvdGlmZjpZUmVzb2x1dGlvbj4KICAgICAgICAgPHRpZmY6WFJlc29sdXRpb24+MTQ0PC90aWZmOlhSZXNvbHV0aW9uPgogICAgICAgICA8dGlmZjpPcmllbnRhdGlvbj4xPC90aWZmOk9yaWVudGF0aW9uPgogICAgICA8L3JkZjpEZXNjcmlwdGlvbj4KICAgPC9yZGY6UkRGPgo8L3g6eG1wbWV0YT4KRG43IAAAAAtJREFUCB1j+A8EAAn7A/0Mu1vnAAAAAElFTkSuQmCC" });

When I console out this object the string is empty…

console.log(state);
// { base64: "" }

2

Answers


  1. Chosen as BEST ANSWER

    Sorry, issue was caused because useEffect was setting the property back to an empty string from a prop that was passed into the component.

    Thanks for the responses. I will delete this question, as it's not an actual issue.


  2. I tried to log out the useState hook locally in vs code and it seems to work fine, although I got the below warning when I hovered over the code snippet

    Tokenization is skipped for long lines for performance reasons. This can be configured via the editor.maxTokenizationLineLength
    

    You might want to consider either renaming the state itself into something unique, the name state might be a reserved keyword or save the original content of this string in a file and use that instead

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search