reactjs - 我试图在 react 中动态地制作一个选择标签

Question

let select_options = []
export const serverCall = async (value) => {
  try {
    const response = await axois.post('test/', value)
      .catch(error => {
          some error code ..

        }
      })
      if (response && response.data) {
      select_options = response.data
    }
  } catch (error) {
    
  } finally {
    
  }
}

export async function makeSelectTag(type_code,group_code) {
  await serverCall({'type_code':type_code,'group_code':group_code})
  console.log(select_options) //It clearly contains the value I want.
  return (<Select style={{ width: 150 }}  >
  {options.map((item) => (
    <Option key={item.code_id}>{item.code_name}</Option>
     ))}                
  </Select>

);
}
export default(commonCodeCall, makeSelectTag)

上面的代码是从下面的代码中调用的。

import makeSelectTag from '../myPath'
....
return (
      <div>
        <Form.Item>
          {makeSelectTag('type_code','group_code')}
        </Form.Item>
       ...

错误:对象作为 React 子对象无效(找到:[object Promise])。如果您打算渲染一组子项，请改用数组。
我怎样才能解决问题并使其发挥作用？

Answer 1

你真的不应该做 makeSelectTag功能。而是创建一个 SelectTag获取数据并将其加载到挂载阶段的某种状态的组件:

export function SelectTag({ type_code, group_code }) {
  const [options, setOptions] = useState([])

  useEffect(() => {
    const getOptions = async () => {
      const selectedOptions = await serverCall({ type_code, group_code })
      setOptions(selectedOptions)
    }

    getOptions()
  }, [])

  return (
    <Select style={{ width: 150 }}>
      {options.map((item) => (
        <Option key={item.code_id}>{item.code_name}</Option>
      ))}
    </Select>
  )
}

并在您的组件中将其称为:

    <Form.Item>
      <SelectTag type_code='foo' group_code='bar' />
    </Form.Item>