Uncaught TypeError: Cannot read properties of undefined (reading 'length') while setting the state

Question

Uncaught TypeError: Cannot read properties of undefined (reading 'length') 
Error is showing in react-dom-development.js file
[1]: https://i.stack.imgur.com/6a8tF.png
[2]: https://i.stack.imgur.com/Cn3EP.png

每当我从子组件调用父组件的方法电子邮件处理程序以设置状态时，我都会收到上述错误

父组件:

const loginStates = (
    function states() {
        return {
            email: '',
            password: ''
        }
    }
)
    const LoginContainer = () => {
    const [state, setState] = useState(loginStates);

    const onChangeEmailHandler = (event) => {
        setState(prevState => {
            return { ...prevState, email: event.target.value }
        });
    }

    return (
        <div>
            <LoginComponent
                onChangeEmailHandler={onChangeEmailHandler}
            />
        </div>
    )
}

子组件:

const LoginComponent = props => {
    const classes = styles();
    const { onChangeEmailHandler } = props;
    const [isSignUpPage, setIsSignUpPage] = useState(false);

    return (
        <React.Fragment>
            <TextField 
              type='text' name='email' id='email' value={state.email}
              onChange={(event) =>onChangeEmailHandler(event)}
            />
        </React.Fragment>
    )
}

Answer 1

不要传入函数作为状态，传入对象...

const initialLoginState = {
            email: '',
            password: ''
        }
    
    const LoginContainer = () => {
    const [state, setState] = useState(initialLoginState);

Answer 2

我无法重现您的错误，但是我对您的代码进行了一些更改以使其正常工作，事实证明，为了在 useState 挂钩中传递一个函数，您需要传递一个高阶函数 returns你想要的功能，你可以查看完整的解释。

父组件:

import LoginComponent from "./child";
import React, { useState } from "react";

const loginState = function states() {
  return {
    email: "",
    password: ""
  };
};

const LoginContainer = () => {
  const [state, setState] = useState(() => loginState);

  const onChangeEmailHandler = (email) => {
    const cur = state();
    setState(() => () => ({ ...cur, email }));
  };

  return (
    <div>
      <LoginComponent
        onChangeEmailHandler={onChangeEmailHandler}
        email={state().email} // You need to pass the email here to display it on rerender.
      />
    </div>
  );
};

export default LoginContainer;

子组件:

import React from "react";

const LoginComponent = (props) => {
  // const classes = styles();
  const { onChangeEmailHandler } = props;
  // const [isSignUpPage, setIsSignUpPage] = useState(false);

  return (
    <React.Fragment>
      <input
        type="text"
        name="email"
        id="email"
        value={props.email} // recieve the email from the props passed from parent.
        onChange={(event) => onChangeEmailHandler(event.target.value)}
      />
    </React.Fragment>
  );
};

export default LoginComponent;

你可以看看我的沙盒here

Answer 3

我已经找到了这个错误的原因，这是因为:

<React.StrictMode>

标签从 index.js 文件中丢失，只要我用
包装组件它开始工作了。

//In index.js file
ReactDOM.render(
<Provider store={store}>
  <React.StrictMode>
    <App />
  </React.StrictMode>
</Provider>,
document.getElementById('root')
);

Uncaught TypeError: Cannot read properties of undefined (reading 'length') while setting the state

Uncaught TypeError: Cannot read properties of undefined (reading 'length') while setting the state

state

reactjs

react-hooks

use-state