function 已導出，但仍顯示 function 未導出，子 function 在組件中。 反應

Question

我有一個問題，我希望能夠訪問組件內部的 function，並在其他地方的另一個 function 中使用它。 我有一個錯誤說我需要導出它，在我導出它之后，它仍然顯示相同的錯誤。 為什么會這樣，我三次檢查並重新加載頁面仍然是同樣的錯誤。 有沒有什么我錯過了一些學習差距我可能錯過了一個解決方案，一個簡短的解釋會很好。 提前致謝

錯誤

Attempted import error: 'handleViewQuestion' is not exported from '../question/viewquestion.js'.

視圖問題.js

import React, { useState } from 'react';
import { Button } from 'semantic-ui-react';
import { currentloginid } from '../login/loginid.js';
import { deletequestion } from '../question/deletequestion.js';
import { createanswer } from '../answer/createanswer.js';
import { deleteanswer } from '../answer/deleteanswer.js';

export const ViewQuestionComponent = () => {
  let [state, setState] = useState([]);
  export const handleViewQuestion = async () => {
    try {      
      const response = await fetch('http://localhost/gotaquestion/api/api.php?action=viewquestion', {
        method: 'GET',
        credentials: 'include'
      });

      const data = await response.json();
      const result = await data;
      setState(data);
    } catch (e) {
      console.log(e);
    }
  }

  return (
    <div>
      <ViewQuestion onClick={handleViewQuestion} />
      <div id="questions">
        <input id="nq" placeholder="Create New Answer Here"></input>
        <Table rows={state}>
          <DeleteButton onClick={deletequestion} />
          <CreateNewAnswerButton onClick={createanswer} />
          <DeleteAnswerButton onClick={deleteanswer} />
        </Table>
      </div>
   </div>
  );
};

export function ViewQuestion({onClick}) {
    return (
        <Button onClick={onClick}>View Question</Button>
    );
}

export default ViewQuestion;

const Table = ({ rows, setIdTobeDeleted, children }) => (
  <table className="ui single line table">
    <tbody>
      {rows.map((row) => (
        <tr key={row.questionid}>
          <td>{row.question}</td>
          <td>{row.timestamp}</td>
          <td>{row.catagories}</td>
          <td>{row.answer === null ? "Not Answered" : row.answer}</td>
          <td>
            {React.cloneElement(children[0], { questionid: row.questionid })}
          </td>
          <td>
            {React.cloneElement(children[1], { newanswer: document.getElementById("nq").value, questionid: row.questionid })}
          </td>
          <td>
            {React.cloneElement(children[2], { questionid: row.questionid })}
          </td>
          <td>{row.questionid}</td>
        </tr>
      ))}
    </tbody>
  </table>
);

const CreateNewAnswerButton = ({ questionid, newanswer, onClick }) => (
  <button
    className="ui negative basic button"
    onClick={() => onClick(questionid, newanswer)}
  >Create New Answer</button>
);

const DeleteButton = ({ questionid, onClick }) => (
  <button
    className="ui negative basic button"
    onClick={() => onClick(questionid)}
  >Delete Question</button>
);

const DeleteAnswerButton = ({ questionid, onClick }) => (
  <button
    className="ui negative basic button"
    onClick={() => onClick(questionid)}
  >Delete Answer</button>
);

刪除問題.js

import { handleViewQuestion } from '../question/viewquestion.js';

export function deletequestion(questionid) {
    console.log(questionid);
  var deletequestionfd = new FormData();
  deletequestionfd.append('questionid', questionid);
  fetch('http://localhost/gotaquestion/api/api.php?action=deletequestion', {
      method: 'POST',
      body: deletequestionfd,
      credentials: 'include'
  })
  .then(async function(response) {
      if(response.status === 202) {
        handleViewQuestion();
      }
    })
}

Answer 1

將此 function 保存在單獨的文件中

export const handleViewQuestion = async () => {
   try {      
    const response = await fetch('http://localhost/gotaquestion/api/api.php?action=viewquestion',{
        method: 'GET',
        credentials: 'include'
      });

      const data = await response.json();
      const result = await data;
      setState(data);
    } catch (e) {
      console.log(e);
    }
  }

並從useEffect組件中的useEffect調用。

如果您將其保留在通用 function 中，那么您可以在任何地方使用/調用，在這里您將在導出的組件中導出。

提供樣品，您可以根據您的要求進行修改

 const callToApi = () => {
    return fetch('http://localhost/gotaquestion/api/api.php?action=viewquestion',{
        method: 'GET',
        credentials: 'include'
      })
      .then(res=> res.json())
      .then(res=> res)
      .catch(err=> console.log(err))
  }

然后在任何需要的地方調用（例如useEffect ）

   callToApi()
   .then(data => setState(data));

Answer 2

導入和導出只能出現在頂層——它們不能放在組件中。 您必須將handleViewQuestion移到組件之外。

Answer 3

您不能導出到 function。 您的代碼必須完全重構。

在不讓你使用 useEffect 和其他你可能還不知道的事情的情況下做到這一點

問題.js

這里只存儲 API 邏輯，沒有 state，沒有組件……只是可重用的方法。

export const questionGet = () => {
  return fetch('http://localhost/gotaquestion/api/api.php?action=viewquestion', {
    method: 'GET',
    credentials: 'include'
  })
  .then( response => response.json() )
}

export const deleteQuestion = (questionid) => {
  var deletequestionfd = new FormData();
  deletequestionfd.append('questionid', questionid);
  return fetch('http://localhost/gotaquestion/api/api.php?action=deletequestion', {
    method: 'POST',
    body: deletequestionfd,
    credentials: 'include'
  })
  .then( response => {
    return response.status === 202);
  })
}

[...]

組合

import React, { useState } from 'react';
import { Button } from 'semantic-ui-react';
import { currentloginid } from '../login/loginid.js';
import { questionGet, questionDelete, ... } from '../question.js';


export const ViewQuestionComponent = () => {
  let [state, setState] = useState([]);

  const _show = () => {
    questionGet()
    .then( setState )
    .catch( console.error )
    ;
  };

  const _deleteQuestion = (id) => {
    questionDelete(id)
    .then( success => {
      if ( success )
        return _show();
    })
    .catch( console.error )
    ;
  }

  const _deleteAnswer = [...];
  const _createAnswer = [...];

  return (
    <div>
      <ViewQuestion onClick={_show} />
      <div id="questions">
        <input id="nq" placeholder="Create New Answer Here"></input>
        <Table rows={state}>
          <DeleteButton onClick={_deleteQuestion} />
          <CreateNewAnswerButton onClick={_createAnswer} />
          <DeleteAnswerButton onClick={_deleteAnswer} />
        </Table>
      </div>
   </div>
  );
};