Javascript 将 props 传递给其他组件

1. 您没有阻止默认表单操作的发生.这将重新加载应用程序.
2. You should lift the login state to the common parent of 应用程序 and 应用程序编程接口 so it can be passed down as a prop. See Lifting State Up.

例子:

指数js

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

import React, { useState } from 'react';
import ReactDOM from 'react-dom';
import 应用程序 from './应用程序';
import 应用程序编程接口 from './api';

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

  return (
    <>
      <应用程序 setLogin={setLogin} />
      <应用程序编程接口 login={login} />
    </>
  );
};

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

应用程序

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

function 应用程序({ 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>
    </>
  );
}

应用程序编程接口

const 应用程序编程接口 = ({ 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>;
};