函数已导出，但仍显示函数未导出，组件中的子函数。反应

Question

我遇到了一个问题，我希望能够访问组件内部的函数，并在其他地方的另一个函数中使用它。我有一个错误，说我需要导出它，在我导出它之后，它仍然显示相同的错误。为什么，我三次检查并重新加载的页面仍然是相同的错误。我是否遗漏了一些学习差距我可能遗漏了一个解决方案，简单解释一下就好了。提前感谢

错误

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

viewquestion.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

将此函数保存在一个单独的文件中

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

并从ViewQuestionComponent组件内的useEffect调用。

如果您将其保留在公共函数中，那么您可以在任何地方使用/调用，并且在导出的组件中导出。

提供样品，您可以根据您的要求修改

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

不能导出到函数中。您的代码必须完全重构。

要做到这一点而不让你使用useEffect和其他你可能还不知道的事情可以用完成

问题.js

这里只存储API逻辑，没有状态，没有组件。。。只是可重复使用的方法。

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