【发布时间】：2021-12-02 20:21:17
【问题描述】：
我有一个带有 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
【问题讨论】：
-
哪一行产生了错误？
-
请格式化您的代码，使其更具可读性并删除不相关的代码。
标签： javascript arrays reactjs dictionary