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

Question

您好，我在组件之间传递道具时遇到问题。 我无法分享确切的代码，所以我制作了一个简化版本。 我没有收到任何控制台错误，尽管登录显然是“未定义的”。感谢任何见解！

应用程序.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;

索引.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

1. 您没有阻止默认表单操作的发生。 这将重新加载应用程序。
2. 您应该将login名 state 提升到App和Api的共同父级，以便它可以作为 prop 传递下去。 请参见将 State 向上提升。

例子：

索引.js

将login名 state 移动到父组件，以便它可以作为 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事件 object 访问表单字段。

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>;
};