反应将道具传递给其他组件

Question

您好，我在组件之间传递道具时遇到问题。我无法分享确切的代码，所以我制作了一个简化版本。我没有收到任何控制台错误，虽然登录显然是 'undefined' 任何见解表示赞赏！

App.js

import React, { useState } from "react";


function App() {
  
 
  const [login, setLogin] = useState('Jpm91297');

  const changeState = () => {
    const newLogin = document.getElementById('loginData').value;
    setLogin(newLogin);
  }

  return (
    <>
      <h1>Fancy API Call!!!</h1>
      <form onSubmit={() => changeState()}>
          <input type='text' id='loginData'></input>
          <button>Submit</button>
      </form>
    </>
  );
}

export default App;

Api.Js

import React, {useEffect, useState} from "react";

const Api = ( { login } ) => {
    const [data, setData] = useState(null);
    
    
    useEffect(() => {
        fetch(`https://api.github.com/users/${login}`)
          .then((res) => res.json())
          .then(setData);
      }, []);
    
      if (data) {
        return <div>{JSON.stringify(data)}</div>
      }
    
      return <div>No data Avail</div>

}

export default Api;

Index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import Api from './api'

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

Answer 1

您没有阻止默认表单操作的发生。这会重新加载应用程序。
您应该将 login 状态提升到 App 和 Api 的共同父级，以便它可以作为 prop 传递下去。参见 Lifting State Up。

示例：

index.js

将 login 状态移动到父组件，以便它可以作为 props 传递给关心它的子组件。

import React, { useState } from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import Api from './api';

const Root = () => {
  const [login, setLogin] = useState('Jpm91297');

  return (
    <>
      <App setLogin={setLogin} />
      <Api login={login} />
    </>
  );
};

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

应用程序

将 changeState 回调作为 form 元素的 onSubmit 处理程序直接传递并阻止默认操作。从 onSubmit 事件对象访问表单字段。

function App({ setLogin }) {
  const changeState = (event) => {
    event.preventDefault();
    const newLogin = event.target.loginData.value;
    setLogin(newLogin);
  }

  return (
    <>
      <h1>Fancy API Call!!!</h1>
      <form onSubmit={changeState}>
        <input type='text' id='loginData'></input>
        <button type="submit">Submit</button>
      </form>
    </>
  );
}

Api

const Api = ({ login }) => {
  const [data, setData] = useState(null);
    
  useEffect(() => {
    fetch(`https://api.github.com/users/${login}`)
      .then((res) => res.json())
      .then(setData);
  }, [login]); // <-- add login dependency so fetch is made when login changes
    
  if (data) {
    return <div>{JSON.stringify(data)}</div>;
  }
    
  return <div>No data Avail</div>;
};

反应将道具传递给其他组件

React passing props to other components

javascript

reactjs

react-props

react-hooks