コンポーネント内の関数にアクセスして、別の関数で使用できるようにしたいという問題があります。エクスポートする必要があるというエラーが発生しました。エクスポートした後も、同じエラーが表示されます。それはなぜですか、私はトリプルチェックしてページをリロードしましたが、それでも同じエラーです。私が解決策を逃したかもしれないいくつかの学習ギャップを逃している何かがありますか、そして簡単な説明がいいでしょう。前もって感謝します
エラー
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>
);
deletequestion.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();
}
})
}
この関数を別のファイルに保存します
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))
}
次に、必要な場所でこのように呼び出します(eg- useEffect
)
callToApi()
.then(data => setState(data));
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加