React中通过DOM操作添加<li>元素为何无列表样式？

问题根源 #

你代码里的核心错误是对appendChild方法的返回值理解有误：Element.appendChild()返回的是被插入的子节点，而非调用该方法的父元素。

你写的let name2use = nameElm.appendChild(nameText)，这里name2use拿到的是文本节点nameText，不是你创建的<li>元素。之后你把这个文本节点直接追加到<ol>里，最终DOM结构变成了<ol>文本1文本2文本3...</ol>——没有<li>标签包裹内容，浏览器自然不会识别为列表项，也就不会显示编号、换行等列表样式。

快速修复（直接操作DOM方式） #

修改stepTwo里的循环逻辑，直接把完整的<li>元素追加到<ol>中：

function stepTwo(){
axiosTest()
        .then(data =>{
           for (let i = 0; i < data.length; i++) {
 console.log(data[i].name);
 let nameElm = document.createElement("li");
 let nameText = document.createTextNode(data[i].name);
 nameElm.appendChild(nameText); // 直接把文本放入li，不需要接收返回值
 document.getElementById("list4names").appendChild(nameElm); // 把整个li加到ol里
}
        })
    }

更符合React规范的写法（推荐） #

直接操作DOM不是React的最佳实践，应该用状态管理数据，通过JSX渲染列表：

import React, { useState, useEffect } from "react";
import { createRoot } from 'react-dom/client';
import axios from "axios";

const BASEURL = "https://jsonplaceholder.typicode.com/users";

function Component1(){
    const [names, setNames] = useState([]);

    // 组件挂载时发起请求
    useEffect(() => {
        axios.get(BASEURL)
            .then(res => setNames(res.data.map(item => item.name)))
            .catch(err => console.error(err));
    }, []);

    return(
        <div>
            <ol>
                {/* 通过map渲染列表项，自动生成li标签 */}
                {names.map((name, idx) => (
                    <li key={idx}>{name}</li>
                ))}
            </ol>
        </div>
    )
}

const root = createRoot(document.getElementById('root'));
root.render(<Component1 />);

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