如何在React.js组件中发起GET请求并正确渲染返回内容

• 移除无效的async标识：第一个useEffect内无异步逻辑，不需要加async修饰，多余的async会导致useEffect返回Promise，不符合React规范。
• 修正异步useEffect写法：useEffect不支持直接传入async回调，需要在内部定义异步函数再执行，同时补充dispatch到依赖数组避免语法警告。
• 补充状态兜底判断：初始folder为空对象，直接匹配任务会因为folder.id为undefined匹配不到结果，添加加载状态避免异常渲染。
• 补充列表渲染key：map遍历渲染列表时需要添加唯一key属性，避免React抛出渲染警告。

修复后完整代码 #

import React from 'react';
import {useSelector, useDispatch} from 'react-redux';
import {Link, useParams} from 'react-router-dom';
import axios from 'axios';
import swal from 'sweetalert';

export default function ViewFolder(props){
    const params = useParams();
    const dispatch = useDispatch();
    const tasks = useSelector((state) => state.tasks);
    const list = useSelector((state) => state.folders);
    const [folder, setFolder] = React.useState({});

    React.useEffect(() => {
        if(!list || list.length == 0) return;
        setFolder(list.find((oneItem) => oneItem.id == params.id));
    }, [params, list]);

    React.useEffect(() => {
        const fetchTasks = async () => {
            try{
                const res = await axios.get('http://localhost:3000/to-do');
                dispatch({
                    type: 'LIST_TASKS',
                    list: res.data
                });
            }
            catch(e){
                swal("Oops!", e.message, "error");
            }
        }
        fetchTasks()
    }, [dispatch]);

    // 加载状态兜底
    if(!folder.id) return <div>加载中...</div>

    return(
        <div>
            <div>
                <h1>Folder: {folder.name}</h1>
            </div>
            <table>
                <tbody>
                    <tr>
                        <td>
                            <ul>
                                {tasks.find((oneItem) => oneItem.folder_id == folder.id) ? (
                                    <li>Tasks:
                                        <ul>
                                            {tasks.map((oneItem) =>
                                                oneItem.folder_id == folder.id ? (
                                                    <li key={oneItem.id}>{oneItem.name}</li>
                                                ) : null
                                            )}
                                        </ul>
                                    </li> ) : <li> There are no tasks in this folder yet</li>
                                }
                            </ul>
                        </td>
                    </tr>
                </tbody>
            </table>
            <div>
                <Link to='/task/add'>Add Task</Link>
            </div>
            <div>
                <Link to={'/folder/list'}>Back to folders list</Link>
            </div>
        </div>
    );
}

内容的提问来源于stack exchange，提问作者Ignacio Garcia