我有一個帶有 reactjs 的問題串列我有一個有效的代碼而不是有效的部分。我想從 api 中獲取資料并添加一個陣列來列出組件，這些組件已經設計好了并且它的 props 都是真的。
讓我解釋：
代碼片段：
import './App.css';
import React,{useState,useEffect} from 'react';
import {Container, Row} from 'reactstrap';
import Login from './components/Login';
import MainPage from './MainPage';
import WorkersPage from './WorkersPage';
import Schedule from './components/Schedule';
import Createrequest from './components/Createrequest';
import Jobrequests from './components/Jobrequests';
function getLocalObject(y)
{
var x;
x=localStorage.getItem(y);
return JSON.parse(x);
}
let array=[]
let requestArray=[]
function App() {
const [profile,setProfile]=useState('');
const [username,setUsername]=useState('');
const [requestedJobName,setRequestedJobName]=useState('');
const [requests,setRequests]=useState([]); //this is for requests
const [message,setMessage]=useState('')
const [password,setPassword]=useState('');
const [logout,setLogout]=useState(0);
const [allJobs,setAllJobs]=useState([]); //this is for all jobs
//This is for all jobs
useEffect(() => {
var requestOptions = {
method: 'GET',
redirect: 'follow'
};
fetch("http://localhost/scheduleapp/api/schedule/all", requestOptions)
.then(response => response.text())
.then(result => {
setAllJobs(JSON.parse(result))
console.log('rs',result,'ls',allJobs)
})
.catch(error => console.log('error', error));
}, [])
// This is for requests (only admins!)
useEffect(() => {
var requestOptions = {
method: 'GET',
redirect: 'follow'
};
fetch("http://localhost/scheduleapp/api/schedule/admin/requests", requestOptions)
.then(response => response.text())
.then(result => {setRequests( JSON.parse(result))})
.catch(error => console.log('error', error));
}, [])
function exit()
{
localStorage.clear()
window.location.reload(true);
}
//login function
const login = () => {
var myHeaders = new Headers();
myHeaders.append("Content-Type", "application/json");
myHeaders.append("Access-Control-Allow-Origin","*");
myHeaders.append('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE,PATCH,OPTIONS');
var raw = JSON.stringify({username, password});
var requestOptions = {
method: 'POST',
headers: myHeaders,
body: raw,
redirect: 'follow'
};
//dsaasd
fetch("http://localhost/scheduleapp/api/personals/login", requestOptions)
.then(response => response.text())
.then(data =>{
localStorage.setItem('Logged',data);
})
.catch(error => console.log('error', error));
window.location.reload();
}
if(!getLocalObject('Logged'))
{
return( <div> <Login onSubmit={(e)=>e.preventDefault(e)} username={(e)=>setUsername(e.target.value)} password={(e)=>setPassword(e.target.value)} OnClick={()=>login() } /></div>
)
}
else{
if(getLocalObject('Logged').is_admin==1)
{
function accept()
{
}
function decline()
{
}
return (
<div>
{allJobs.map(item=>{
return (<Schedule approved_job_name={item.approved_job_name} approved_job_unique_id={item.approved_job_unique_id} approved_job_worker={item.approved_job_worker} date={item.date} />
)//it works great
} )
}
{
requests.map( item=>{
return(
<Jobrequests id={item.id}/>
)// this gives 'TypeError: requests.map is not a function'
} )
}
<button onClick={exit} className='btn btn-danger'>LogOut</button>
</div>
);
}
else{
function sendRequest()
{
var myHeaders = new Headers();
myHeaders.append("Content-Type", "application/json");
var raw = JSON.stringify({
"requestedJobName": requestedJobName,
"uniquejobid": requestedJobName Date.now(),
"username": getLocalObject('Logged').username
});
var requestOptions = {
method: 'POST',
headers: myHeaders,
body: raw,
redirect: 'follow'
};
fetch("http://localhost/scheduleapp/api/schedule/worker/addrequest", requestOptions)
.then(response => response.text())
.then(result => console.log(result))
.catch(error => console.log('error', error));
}
return (
<div className='ms-4 mt-4'>
<Createrequest onSubmit={(e)=>e.preventDefault()} onChange={(e)=>setRequestedJobName(e.target.value)} onClick={sendRequest} />
{allJobs.map(item=>{
return (
<Schedule approved_job_name={item.approved_job_name} approved_job_unique_id={item.approved_job_unique_id} approved_job_worker={item.approved_job_worker} date={item.date} />
)
})}
<button onClick={exit} className='btn btn-danger'>LogOut</button>
</div>
);
}
}
}
export default App;
我想如果登錄用戶是管理員用戶將看到作業請求并且所有作業都列出成功但請求給出錯誤“地圖不是功能”最好的問候從現在開始謝謝...
編輯： 控制臺日志輸出：
useEffect(() => { fetch("http://localhost/scheduleapp/api/schedule/admin/requests") .then(response => setRequests(response.json()))
}, [])
輸出：請求 []
useEffect(() => { fetch("http://localhost/scheduleapp/api/schedule/admin/requests") .then(response => setRequests(response.json())) }, [])
Output:
req
Promise {<fulfilled>: {…}}
[[Prototype]]: Promise
[[PromiseState]]: "fulfilled"
[[PromiseResult]]: Object
id: "1"
request_job_current_date: "2021-10-05"
request_job_name: "sdasdads"
request_job_unique_id: "sdasdads1633453239"
request_job_worker_uname: "dariustheone"
[[Prototype]]: Object
uj5u.com熱心網友回復：
由于requests初始狀態是一個陣列并且只有一個setRequest，因此您的問題來自您傳遞給的資料
.then(result => {setRequests( JSON.parse(result))})
檢查里面有什么，result因為你使用 JSON.parse，所以你呼叫 .text() 而不是 .json() 也很奇怪。
但無論如何你的問題來自它的內容result似乎不是一個陣列
uj5u.com熱心網友回復：
我認為您應該確保對“/scheduleapp/api/schedule/admin/requests”的獲取請求在決議后回傳一個陣列。當您嘗試映射不是陣列的內容時會發生錯誤。
uj5u.com熱心網友回復：
您的問題來自這樣一個事實，即requests' 陣列型別被您的useEffect().
我建議這樣做：
fetch("http://localhost/scheduleapp/api/schedule/admin/requests", requestOptions)
.then(response => response.json())
.then(data => setRequests(data))
只要您console.log(requests)沒有顯示正確的array（您的似乎是一個物件），那么您的問題就會持續存在。
PS 由于GET是 的默認方法fetch，我相信requestOptions不需要將其指定為 on 。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/316011.html
標籤：javascript 数组 反应 字典