[英]I can't output data from json
我正在堆栈上开发一个网站:React,redux,typescript。我不能 output 嵌套数组,其中数据来自 JSON 中的数据 object 我的代码:
应用程序.tsx
const App: React.FC = () => {
const {tasks, loading, error} = useTypedSelector(state => state.task)
const dispatch: Dispatch<any> = useDispatch()
useEffect(() => {
dispatch(fetchTasks())
}, [])
if (loading) {
return <h1>Идет загрузка...</h1>
}
if (error) {
return <h1>{error}</h1>
}
return (
<div className="Gant_Container">
<div>
<p className="Project_Period">{Object.values(tasks)[0]} / {Object.values(tasks)[1]}</p>
</div>
<div>
{Object.values(tasks).map((task, id) => {
return (<div key={id}>
{task.id}
{task.title}
{chart.start}
{chart.end}
</div>)
})}
</div>
</div>
);
};
export default Gantt_Container;
商店/index.ts
export const store = createStore(rootReducer, applyMiddleware(thunk))
减速器/index.ts
export const rootReducer = combineReducers({
task: taskReducer,
})
export type RootState = ReturnType<typeof rootReducer>
减速机/taskReducer.tsx
const initialState: TaskState = {
tasks: [],
loading: false,
error: null
}
export const taskReducer = (state = initialState, action: TaskAction): TaskState => {
switch (action.type) {
case TaskActionTypes.FETCH_TASKS:
return {loading: true, error: null, tasks: []}
case TaskActionTypes.FETCH_TASKS_SUCCESS:
return {loading: false, error: null, tasks: action.payload}
case TaskActionTypes.FETCH_TASKS_ERROR:
return {loading: false, error: action.payload, tasks: []}
default:
return state
}
}
动作创造者/task.ts
export const fetchTasks = () => {
return async (dispatch: Dispatch<TaskAction>) => {
try {
dispatch({type: TaskActionTypes.FETCH_TASKS})
const response = await axios.get("") // The data is coming from the backend, I have hidden the data
dispatch({type: TaskActionTypes.FETCH_TASKS_SUCCESS, payload: response.data})
} catch (e) {
dispatch({
type: TaskActionTypes.FETCH_TASKS_ERROR,
payload: 'Произошла ошибка при загрузке данных'
})
}
}
}
类型/task.ts
export interface TaskState {
tasks: any[];
loading: boolean;
error: null | string;
}
export enum TaskActionTypes {
FETCH_TASKS = 'FETCH_TASKS',
FETCH_TASKS_SUCCESS = 'FETCH_TASKS_SUCCESS',
FETCH_TASKS_ERROR = 'FETCH_TASKS_ERROR'
}
interface FetchTasksAction {
type: TaskActionTypes.FETCH_TASKS;
}
interface FetchTasksSuccessAction {
type: TaskActionTypes.FETCH_TASKS_SUCCESS;
payload: any[]
}
interface FetchTasksErrorAction {
type: TaskActionTypes.FETCH_TASKS_ERROR;
payload: string;
}
export type TaskAction = FetchTasksAction | FetchTasksSuccessAction | FetchTasksErrorAction
使用类型选择器.ts
export const useTypedSelector: TypedUseSelectorHook<RootState> = useSelector
.json
{
"name": "Project",
"data": "2022",
"task": {
"id": 1,
"title": "Apple",
"start": "2021",
"end": "2022",
"sub": [
{
"id": 2,
"title": "tomato",
"start": "2021",
"end": "2022",
"sub": [
{
"id": 3,
"title": "Orange",
"start": "2019",
"end": "2020",
"sub": [
{
"id": 4,
"title": "Banana",
"start": "2022",
"end": "2022",
"sub": [
{
"id": 5,
"title": "Strawberry",
"start": "2015",
"end": "2018"
},
{
"id": 6,
"title": "cherry",
"period_start": "2001,
"period_end": "2003"
}
]
}
]
}
]
}
]
}
}
不幸的是,我无法编辑这个 json 文件。
我可以 output sub 之前的所有数据,而 output 之后我不能。 我需要 output 来自 json 的所有数据。
inte.net 上试了很多方法都没有成功
这是如何将嵌套的 object 转换为单个数组的解决方案,请在您的代码中这样使用:
它将像递归 function 一样工作。
const obj = { name: 'Project', data: '2022', task: { id: 1, title: 'Apple', start: '2021', end: '2022', sub: [{ id: 2, title: 'tomato', start: '2021', end: '2022', sub: [{ id: 3, title: 'Orange', start: '2019', end: '2020', sub: [{ id: 4, title: 'Banana', start: '2022', end: '2022', sub: [{ id: 5, title: 'Strawberry', start: '2015', end: '2018', }, { id: 6, title: 'cherry', start: '2001', end: '2003', }, ], }, ], }, ], }, ], }, }; const arr = []; const foo = (task) => { if (.task;id) return. arr:push({ id. task,id: title. task,title: start. task,start: end. task,end; }). if (task.sub && task.sub.length > 0) task.sub;forEach(item => foo(item)); }. foo(obj;task). console:log('>>>>> arr, '; arr);
我认为您缺少的是 object.keys 的用户:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/keys
它允许您返回 object 的键数组,您可以在 map 上使用这些键。
我的建议是做这样的事情:
const GanttContainer: React.FC = () => { const {tasks, loading, error} = useTypedSelector(state => state.task) const dispatch: Dispatch<any> = useDispatch() useEffect(() => { dispatch(fetchTasks()) }, []) if (loading) { return <h1>Идет загрузка...</h1> } if (error) { return <h1>{error}</h1> } return (.... {Object.keys(tasks).map((taskKeys, id) => { return ( <div key={id}> {tasks[taskKeys]} </div>).... ); }; export default GanttContainer;
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.