javascript - React：为什么一次只有一个 onclick 组件有效而其他组件失败？

问题描述

刚开始我的 React 学习曲线，如果我无法解释，请随时要求澄清。这个问题可能看起来很长，但这只是为了更好地理解的代码。

这是我使用路由器的 app.js，配置文件路径出现问题。

function App() {
  return (
    <Router>
      <div className="App">
        <Switch>
          <Route exact path="/">
            <h2>Welcome to jatin</h2>
            <AnonymousUserApi />
            <LoginButton />
            <SignupButton />
          </Route>
          <Route exact path="/profile">
            <Profile />
            <LoginUserApi />
            <History />
            <LogoutButton />
          </Route>
        </Switch>
      </div>
    </Router>
  );
}

一旦使用 auth0 对用户进行身份验证，用户就可以看到，但问题是如果我先单击组件，然后历史组件将不起作用，如果我先单击历史组件，loginuserAPi 组件将不起作用。

在这两个组件中，我为发送回数据的两个组件调用了不同的后端 API（它们没有问题）。

另外：- 用户可以随时点击这些组件，它们不会被使用一次。 更新：-单击第一个组件后，当我尝试单击另一个组件时，它总是显示未定义。对于第二个组件，我也看到了 cors/preflight 问题，即使在 express 中启用了 cors

我的 loginuserAPI 组件

import React, { useState } from 'react';
import { useAuth0 } from '@auth0/auth0-react';
var jwt = require('jsonwebtoken');

const LoginUserApi = () => {
  const [orgURL, setorgURL] = useState('');
  const [responseData, setresponseData] = useState('');

  const { getAccessTokenSilently, user, isAuthenticated } = useAuth0();

  let token;

  const callSecureApi = async () => {
    try {
      token = await getAccessTokenSilently();

      let decodedToken = jwt.decode(token, { complete: true });

      console.log(token);

      const response = await fetch(
        'https://my api endpoint',
        {
          method: 'POST',

          headers: {
            Authorization: `Bearer ${token}`,
            'Content-Type': 'application/json',
          },

          // sending subclaim as userId to backend Axios request!

          body: JSON.stringify({
            longURL: orgURL,
            userId: decodedToken.payload.sub,
          }),
        }
      );

      const respData = await response.json();
      console.log(respData);

      setresponseData(respData.convertedURL);
      console.log('jatin', responseData);
    } catch (error) {
      alert(error.error);
    }
  };

  const submit = (e) => {
    e.preventDefault();
    console.log('clicked');
    if (!orgURL) {
      alert('URL cannot be empty');
    }
  };

  return (
    <div className="container">
      <form onSubmit={submit}>
        <div className="mb-3">
          <label htmlFor="title">Enter your URL</label>
          <input
            type="text"
            value={orgURL}
            onChange={(e) => {
              setorgURL(e.target.value);
            }}
            className="form-control"
            id="title"
            aria-describedby="emailHelp"
            placeholder="Enter Your URL"
          />
        </div>

        <button
          type="submit"
          onClick={callSecureApi}
          className="btn btm-sm btn-success"
        >
          Trimify
        </button>
      </form>

      {orgURL && (
        <div className="mt-5">
          <h6 className="muted">Result</h6>
          <div className="container-fluid">
            <div className="row">
              <p>{responseData}</p>
            </div>
          </div>
        </div>
      )}
    </div>
  );
};

export default LoginUserApi;

我的历史组件。

import React, { useState } from 'react';
import { useAuth0 } from '@auth0/auth0-react';
var jwt = require('jsonwebtoken');

const History = () => {
  const [historyOfUser, setHistory] = useState([]);

  const { getAccessTokenSilently, user, isAuthenticated } = useAuth0();

  let token;

  const callHistoryApi = async () => {
    try {
      token = await getAccessTokenSilently();
      let decodedToken = jwt.decode(token, { complete: true });
      console.log(token);

      const response = await fetch(
        'https://history-enpoint-api',
        {
          method: 'POST',

          headers: {
            Authorization: `Bearer ${token}`,
            'Content-Type': 'application/json',
          },
          body: JSON.stringify({ userId: decodedToken.payload.sub }),
        }
      );

      const respData = await response.json();
      console.log(respData);

      setHistory(respData.URLS);
      console.log('jatin', historyOfUser);
    } catch (error) {
      alert(error.error);
    }
  };

  return (
    <>
      <button onClick={callHistoryApi} className="btn btm-sm btn-success">
        History
      </button>

      <div>
        {historyOfUser.map((history) => <div key={history.originalURL}>{history.converted}</div> )}
      </div>
    
    </>
  );

};

export default History;

简而言之，从后端获取数据的多个组件如何共存？

标签： javascriptreactjs

javascript - React：为什么一次只有一个 onclick 组件有效而其他组件失败？

问题描述

解决方案

推荐阅读