如何在 ReactJS 中获取 ajax 数据

Question

我正在构建 ReactJS 可嵌入 web ui 脚本，因为我是 ReactJS 的新手。 在这里，我试图从我的服务器中提取数据并尝试在 web ui 中显示。 我面临的问题是来自服务器的数据，因为我无法解析它。 请在下面找到数据格式：

0: Object { name: "{\"draw\":0,\"recordsTotal\":8,\"recordsFiltered\":8,\"data\":[{\"first_name\":\"John\",\"last_name\":\"taylor\"},
{\"first_name\":\"John1\",\"last_name\":\"taylor1\"}]}" }
​
1: Object { school: "{\"draw\":0,\"recordsTotal\":0,\"recordsFiltered\":0,\"data\":
[{\"name\":\"school1\",\"location\":\"location1\"},
{\"name\":\"school2\",\"location\":\"location2\"}]}" }

PS：我无法更改我的服务器数据格式。

Model 代码（model.ts）

export interface NameModel {
    name: object;
}

表单代码 (form.tsx)

const Name = () => {
    const service = useContext(ServiceContext);
    const [name, setName] = useState<NameModel[] | undefined>(undefined);
    const [visible, setVisible] = useState(0);
    const [statusText, setStatusText] = useState('');

    const loaders = [useTimeout(() => !name && setStatusText('Loading...'), 500)];

    useEffect(() => {
        service?.getName()
            .then(setName)
            .catch(() => setStatusText('Failed to load, try again later.'))
            .then(() => loaders.forEach((c) => c()));
    }, [service]);

    return (
        <div>
            {
                !name
                    ? statusText
                    : <Fragment>
                        <ul className={style.root}>
                            {
                                name.map((q, i) => (
                                {q}
                                    ))
                            }
                        </ul>
                    </Fragment>
            }
        </div>
    );
};

上面的代码产生： Uncaught (in promise) TypeError: name.map is not a function

如何显示从我的服务器发送的第一个 object 的名字和姓氏？

谢谢

Answer 1

您的问题是name默认情况下可能undefined ，导致name.map((q...部分代码出错，因为undefined没有map function。

您可以通过更改为更合理的默认空数组来解决此问题：

const [name, setName] = useState<NameModel[]>([]);