javascript 从API中获取React下拉列表

mzmfm0qo  于 2023-08-02  发布在  Java
关注(0)|答案(1)|浏览(110)

我想建立“React下拉”,这将给予我选择用户的选项,而我键入他的名字的第一个字母。
用户数据来自我的后端API,格式为JSON。

// http://localhost:5000/users
{
  "users": [
    {
      "company_id": 1,
      "name": "Sally Mae"
    },
    {
      "company_id": 2,
      "name": "Johnathan Ives"
    },
    {
      "company_id": 3,
      "name": "John Smith"
    }
  ]
}

字符串
这是我的fetch部分,但我不能fetch,但我的服务器正在运行,这是代码

fetchData = (inputValue, callback) => {
    if (!inputValue) {
      callback([]);
    } else {
        setTimeout(() => {
  fetch("http://127.0.0.1:5000/users/" + inputValue, {
    method: "GET",
  })
  .then((resp) => {
    console.log(resp);
    return resp.json()
  }) 
  .then((data) => {
     const tempArray = [];
     data.forEach((users) => {
      console.log(tempArray);
      tempArray.push({ label: `${users.name}`, value: `${users.name}`});
      console.log(tempArray);
     });
     callback(tempArray);            
  })
  .catch((error) => {
    console.log(error, "catch the hoop")
  });
});
}
}


感谢任何帮助!

q3aa0525

q3aa05251#

我认为您在这里误解了loadOptions prop的callback是您 Package 检索方法的地方。

const getData = (inputValue) =>
  fetch('http://127.0.0.1:5000/users/' + inputValue, {
    method: 'GET',
  })
    .then((resp) => resp.json())
    .then((data) =>
      data.map((user) => ({ label: user.name, value: user.name }))
    )
    .catch((error) => {
      console.log(error, 'catch the hoop');
    });

const fetchData = (inputValue, callback) => {
  if (!inputValue) {
    callback(Promise.resolve([]));
  } else {
    callback(getData(inputValue));
  }
};

字符串

相关问题