子組件更新時反應不重新渲染

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'));