javascript 如何在ReactJS中显示来自API响应的select下拉列表

1qczuiv0 于 2023-06-28 发布在 Java

关注(0)|答案(2)|浏览(161)

我有一个从MOCK API获得项目列表的函数，我希望获得项目列表并使用React在选择下拉列表中列出它们。这就是我尝试过的，我被卡住了。请不要对我的回答刻薄，我还是一个新的React开发者，我正在学习。

import React, { useEffect, useState } from "react";
import axios from "axios";

const getProjects = () => {
    axios.get('/api/projects', {
        header: {
            Authorization: 'Bearer ' + localStorage.getItem('token')
        }
    })
    .then((res) => {
        return res.data
    })
    .catch((ex) => {
        console.log(ex)
    })
}

const Dropdown = () => {
    
    const [projects, setProjects] = useState([])

    useEffect(() => {
        getProjects()
    })

    return(
        <div>
                       
        </div>
    )
}

export default Dropdown

我已经迭代了几个解决方案，但它们都不起作用。API位于此处MOCK API

编辑这是我对建议的进展程度

import React, { useEffect, useState } from "react";
import axios from "axios";

const getProjects = () => {
    axios.get('/api/projects', {
        header: {
            Authorization: 'Bearer ' + localStorage.getItem('token')
        }
    })
    .then((res) => {
        return res.data
    })
    .catch((ex) => {
        console.log(ex)
    })
}

const Dropdown = () => {
    
    const [projects, setProjects] = useState([])    

    useEffect(() => {
        getProjects(setProjects)
    }, [])

    return(
        <div>
            <label htmlFor="select">Class Name</label>
            <select>
                {projects.map(project => {
                    return <option key={project.id} value={project.id}>{project.name}</option>
                })}
            </select>                       
        </div>
    )
}

export default Dropdown

JavaScript

来源：https://stackoverflow.com/questions/76564251/how-do-i-show-select-dropdown-from-an-api-response-in-reactjs

2条答案

按热度按时间

ohtdti5x1#

您不需要更改状态，也不需要对 AJAX 请求返回的值做任何处理。你需要使用这样的东西：

import React, { useEffect, useState } from "react";
import axios from "axios";

const getProjects = (done) => {
    axios.get('/api/projects', {
        header: {
            Authorization: 'Bearer ' + localStorage.getItem('token')
        }
    })
    .then((res) => {
        done(res.data);
    })
    .catch((ex) => {
        console.log(ex);
    });
};

const Dropdown = () => {
    
    const [projects, setProjects] = useState([]);

    useEffect(() => {
        getProjects(setProjects);
    });

    
    return (
      <div>
        <select>
         {projects.map(project => {
            return (
              <option key={project.id} value={project.id}>
                {project.name}
              </option>
            );
         })}
        </select>
       </div>
    );
};

export default Dropdown

您还需要：

useEffect(() => {
        getProjects(setProjects);
    }, []);

所以 AJAX 请求只在组件挂载时发生，而不是在每次更新时发生（这可能会导致无限循环）。
你也可以把fetch变成一个自定义钩子：

const useProjects = () => {
    const [projects, setProjects] = useState([]);

    useEffect(() => {
      axios.get('/api/projects', {
        header: {
            Authorization: 'Bearer ' + localStorage.getItem('token')
        }
      })
      .then((res) => {
        setProjects(res.data);
      })
      .catch((ex) => {
        console.log(ex);
      });
    }, []);

    return projects;
};

const Dropdown = () => {
    const projects = useProjects();
    
    return (
      <div>
        <select>
         {projects.map(project => {
            return (
              <option key={project.id} value={project.id}>
                {project.name}
              </option>
            );
         })}
        </select>
       </div>
    );
};

赞(0）回复(0）举报 2023-06-28

dfty9e192#

您的代码包含更多错误

1.函数getProject仍然是等待响应，当使用返回将得到undefined或null
1.在useEffect中，您将给予您错误，因为有无限运行项目
1.后调用函数不把数据响应在正确的地方

为了正确的代码和工作必须遵循这些提示

function getProject将他转换为Promise
1.用这个句子useEffect（function（）{}，[]）来一次调用
1.如果使用Promise getProject，则将dataResponse放在setProject（data.response）正确位置

如果你仍然有任何问题或帮助我在这里你必须通知我也如果你需要正确的代码

赞(0）回复(0）举报 2023-06-28

我来回答

javascript 如何在ReactJS中显示来自API响应的select下拉列表

2条答案

相关问题

热门标签

最新问答