React Select - 不从 API 加载数据

Question

我正在尝试从 API 将数据加载到保管箱（组合框）中。下面是 2 个 React-Select 下拉菜单，但它不会在 Dropbox 中显示（显示）任何数据。我还尝试在 let 选项下方的 if 中循环，但一无所获。

我尝试使用 reast_select Axios，但错误比以前更多。如果我控制台日志，我会得到数据，但是，它只是空白。

import React from 'react'
import Select from 'react-select'
import {useEffect,useState} from 'react'
  
const options = [
  { value: 'chocolate', label: 'Chocolate' },
  { value: 'strawberry', label: 'Strawberry' },
  { value: 'vanilla', label: 'Vanilla' }
]


const ClientDropdown = () => {

  const [clientList,setClientList] = useState([])
  //console.log(clientList)

  useEffect(() => {
    clientData();
  },[])

  const clientData = async() => {
    const response = await fetch("https://localhost:7168/TestData");
    //console.log(response);
    const clientDataJson= await response.json();
    //console.log(clientDataJson);
    setClientList(clientDataJson);
  }

  let option = []
  if (clientList.values.length > 0) {
    clientList.values.forEach(client => {
      let roleDate = {}
      roleDate.value = client.studentid
      roleDate.label = client.sudentName
      option.push(roleDate)
      console.log('Im Here' + roleDate)
    })
  }
 
    return (
    <div>
     <Select options={option} />

     <Select
     {
          ...clientList.map((val) => {
          return (
            <options vlaue={val.studentid} label={val.sudentName}></options> 
          )
        })
      }
    />
    </div>
    )
}
export default ClientDropdown

Answer 1

您在该函数中使用了 clientData 作为函数名和变量名。此外，当您使用map 时，您使用的是spread operator，例如...clientList.map((val)。但您应该使用clientList.map((val) 而不是...clientList.map((val)。我在下面的代码中进行了更正。请检查一下。

import React from 'react'
import Select from 'react-select'
import {useEffect,useState} from 'react'
  
const options = [
  { value: 'chocolate', label: 'Chocolate' },
  { value: 'strawberry', label: 'Strawberry' },
  { value: 'vanilla', label: 'Vanilla' }
]


const ClientDropdown = () => {

  const [clientList,setClientList] = useState([])
  //console.log(clientList)

  useEffect(() => {
    clientData();
  },[])

  const clientData = async() => {
    const response = await fetch("https://localhost:7168/TestData");
    //console.log(response);
    const data = await response.json();
    //console.log(data);
    setClientList(data);
  }

  let option = []
  if (clientList.values.length > 0) {
    clientList.values.forEach(client => {
      let roleDate = {}
      roleDate.value = client.studentid
      roleDate.label = client.sudentName
      option.push(roleDate)
      console.log('Im Here' + roleDate)
    })
  }
 
    return (
    <div>
     <Select options={option} />

     <Select
     {
          clientList.map((val) => {
          return (
            <options vlaue={val.studentid} label={val.sudentName}></options> 
          )
        })
      }
    />
    </div>
    )
}
export default ClientDropdown