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)
El código anterior se llama desde el código siguiente.
import makeSelectTag from '../myPath'
....
return (
<div>
<Form.Item>
{makeSelectTag('type_code','group_code')}
</Form.Item>
...
Error: los objetos no son válidos como hijo de React (encontrado: [object Promise]). Si pretendía representar una colección de elementos secundarios, utilice una matriz en su lugar.
¿Cómo puedo resolver el problema y hacerlo funcionar?
realmente no deberías hacer una makeSelectTagfunción. En su lugar, cree un SelectTagcomponente que tome datos y los cargue en algún estado en la etapa de montaje:
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>
)
}
y en su componente llámelo como:
<Form.Item>
<SelectTag type_code='foo' group_code='bar' />
</Form.Item>
Este artículo se recopila de Internet, indique la fuente cuando se vuelva a imprimir.
En caso de infracción, por favor [email protected] Eliminar
Déjame decir algunas palabras