React响应数据不出现(TypeScript)

Question

我想在表中显示api请求中的数据，但没有显示任何数据。数据被写入控制台。(console.log(“响应数据：”+ users.data))

回复如下：[{"UserName":"","PartnerID":"0"},{"UserName":"Asd","PartnerID":"3"},{"UserName":"Asd","PartnerID":"3"},{"UserName":"Asd","PartnerID":"3"},{"UserName":"Asd","PartnerID":"3"},{"UserName":"demo","PartnerID":"3"},{"UserName":"demo","PartnerID":"3"},{"UserName":"Asd","PartnerID":"3"}]

const ListUsers: React.FC = () => {
    type ServerData = {
        userName: string;
        PartnerID: number;
    }

    const [data, setData] = useState<ServerData[]>([]);
    const getData = async (): Promise<void> => {
        await axios.post<ServerData[]>(LIST_ALL_USER)
        .then(users => {
            console.log("Response data: " + users.data)
            setData(users.data);
        })
    }

    useEffect(() => {
        getData()
        console.log("Input data " + data)       //Is empty?
    }, []);

作为回报：

<tbody>
    {data.map((user, index) => (
        <tr key={index}>
            <td>
                <div className='d-flex align-items-center'>
                    <div className='d-flex justify-content-start flex-column'>
                        <span className='text-dark fw-bolder fs-6'>
                            {user.userName}
                        </span>
                        <span className='text-muted fw-bold text-muted d-block fs-7'>
                            HTML, JS, ReactJS
                        </span>
                    </div>
                </div>
            </td>
            <td>
...

有什么问题吗？请帮帮忙

这个代码片段可以在这里获得：https://pastebin.com/bK3X2R1B

Answer 1

尝试将user.userName更改为user.UserName，如您在上面提到的数据中定义的那样

<tbody>
    {data.map((user, index) => (
        <tr key={index}>
            <td>
                <div className='d-flex align-items-center'>
                    <div className='d-flex justify-content-start flex-column'>
                        <span className='text-dark fw-bolder fs-6'>
                            {user.UserName} // <-- Here
                        </span>
                        <span className='text-muted fw-bold text-muted d-block fs-7'>
                            HTML, JS, ReactJS
                        </span>
                    </div>
                </div>
            </td>
            <td>