子组件更新时反应不重新渲染

Question

我试图让 SigninForm 将 email 传递回调用它的组件（App）。 然后当 email 更新时，应用程序应该重新渲染。 我试图创建前面问题中给出的结构。 但是，我无法让 App 组件在我的 React 代码中更新和显示 email。

TLDR：当我单击按钮时，为什么 Email 没有显示在片段上？

 function App() { const [email, setEmail] = React.useState(); return ( <div> EMAIL: {email} <br></br> <SigninForm setEmail={setEmail}/> </div> ) } function SigninForm() { const [email, setEmail] = React.useState() var credsSubmit = (event) => { event.preventDefault(); setEmail('me@me.com') } return ( <div> <form onSubmit={credsSubmit}> <input type='submit' /> </form> </div> ) } ReactDOM.render(<App />, document.getElementById('root'));

 <script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script> <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script> <div id="root"></div>

Answer 1

 function App() { const [email, setEmail] = React.useState(); return ( <div> EMAIL: {email} <br></br> <SigninForm setEmail={setEmail}/> </div> ) } function SigninForm(props) { const [email, setEmail] = React.useState() var credsSubmit = (event) => { event.preventDefault(); props.setEmail('me@me.com') } return ( <div> <form onSubmit={credsSubmit}> <input type='submit' /> </form> </div> ) } ReactDOM.render(<App />, document.getElementById('root'));

 <script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script> <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script> <div id="root"></div>

1-在App组件中，您将setEmail作为道具传递给SigninForm这一行：

<SigninForm setEmail={setEmail}/>

2-在SigninForm中，您正在创建一个 state 变量email和一个设置器 function 来设置它的值setEmail即这一行：

const [email, setEmail] = React.useState()

在SigninForm中，您调用setEmail认为这将更新App组件的 state ，而实际上您调用的是本地setEmail而不是您从道具收到的那个。

通过调用props.setEmail您正在调用来自App组件而不是本地组件的方法。

这是关于组件和道具的反应指南

Answer 2

function App() {
  const [email, setEmail] = React.useState();
  return ( 
    <div>
      EMAIL: {email} 
      <br></br> 
      <SigninForm setEmail={setEmail}/> 
    </div>
  )
}

function SigninForm(props) {
  var credsSubmit = (event) => {
    event.preventDefault();
    props.setEmail('me@me.com')     // changed this and removed local email state
  }
  
  return ( 
    <div>
      <form onSubmit={credsSubmit}>
        <input type='submit' />
      </form> 
    </div>
  )
}

ReactDOM.render(<App />, document.getElementById('root'));

Answer 3

你试过按钮吗？

function App() {
  const [email, setEmail] = React.useState();

  return ( 
    <div>
      EMAIL: {email} 
      <br></br> 
      <SigninForm setEmail={setEmail}/> 
    </div>
  )
}

function SigninForm() {
  const [email, setEmail] = React.useState()

  var credsSubmit = (event, data) => {
    event.preventDefault();
    props.setEmail(data.email.toLowerCase());
  }
  
  return ( 
    <div>
      <form onSubmit={credsSubmit}>
        <input name="email" />
        <button type="submit">Submit</button>
      </form>
    </div>
  )
}

ReactDOM.render(<App />, document.getElementById('root'));