Question 214251 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – React : Objects are not valid as a React child

Error :
Objects are not valid as a React child (found: object with keys {data, status, statusText, headers, config, request}). If you meant to render a collection of children, use an array instead.

I haven’t been able to find out what’s the problem for hours. Please help me.
The following error occurs when membership registration is successful.

I thought this was the problem. But I don’t know if this is right.

RegisterForm.tsx

...
const RegisterForm = () => {
  const navigate = useNavigate();
  const dispatch = useDispatch<AppDispatch>();
  const { form, auth, authError, user } = useSelector(({ auth, user }) => ({
    form: auth.register,
    auth: auth.auth,
    authError: auth.authError,
    user: user.user,
  }));
...
useEffect(() => {
    if (authError) {
      if (authError === 409) {
        setError("fail 409");
      } else {
        setError("fail");
      }
      return;
    }

    if (auth) {
      dispatch(check());
    }
  }, [auth, authError, dispatch]);
...
return (
    <AuthForm
      type="login"
      form={form}
      onChange={onChange}
      onSubmit={onSubmit}
      error={error}
    />
  );
...

AuthForm.tsx

const AuthForm: React.FC<AuthFormProps> = ({
  type,
  form,
  onChange,
  onSubmit,
  error,
}) => {
  const text = textMap[type];
  return (
    <SBox>
      <h3>{text}</h3>
      <form onSubmit={onSubmit}>
        <SInput
          autoComplete="username"
          name="username"
          placeholder="id"
          onChange={onChange}
          value={form.username}
        />
        <SInput
          autoComplete="new-password"
          name="password"
          placeholder="password"
          type="password"
          onChange={onChange}
          value={form.password}
        />
        {type === "register" && (
          <SInput
            autoComplete="new-password"
            name="passwordConfirm"
            placeholder="passwordtwo"
            type="password"
            onChange={onChange}
            value={form.passwordConfirm}
          />
        )}
        <SError>{error && <div>{error}</div>}</SError>
        <Button>{text}</Button>
      </form>
    </SBox>
  );
};

auth.ts

...
export const register = createAsyncThunk(
  "auth/register",
  async ({ username, password  } : any, { rejectWithValue }) => {
    try {
      const res = await authAPI.register({ username, password });
      const {data, status, statusText} = res;
      return {data, status, statusText};
      
    } catch (err : any) {
      return rejectWithValue(err.response.status);
    }
  }
);
...
extraReducers: (builder) => {
    builder.addCase(register.fulfilled, (state, action) => {
      state.auth = action.payload
      state.authError = null;
    });
    builder.addCase(register.rejected, (state, action) => {
      state.authError = action.payload;
    });
...

Auth Error If you comment the exception handling part, no more errors appear. However, membership is not responding.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    First of all, I'm sorry that my question is not accurate. The problem was with NavBar. Mistake using {user} as it is Modified to {user.username} and resolved.. If it was a large sauce, it would have been hard to find.

    const NavBar = () => {
  const user = useSelector((state: RootState) => state.userReducer.user);
  const dispatch = useDispatch<AppDispatch>();
  const onLogout = () => {
    dispatch(logout());
  };

  return (
    <SNavBar>
      <Link to="/">
        <img src={logo} alt="logo" style={{ height: 30, marginTop: 4 }} />
      </Link>

      <Button to="/post">board</Button>
      <Button to="/mypage">mypage</Button>

      {user ? (
        <>
          <Button>{user}</Button>
          <Button onClick={onLogout}>logout</Button>
        </>
      ) : (
        <>
          <Button to="/login">login</Button>
          <Button to="/register">register</Button>
        </>
      )}
    </SNavBar>
  );
};

  2. 0

    Error seems to be coming from this line <SError>{error && <div>{error}</div>}</SError>

    error is generally an object. Try <SError>{error && <div>{JSON.stringify(error)}</div>}</SError>

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search