Question

这个自定义挂钩有问题。

import React, {Fragment, useState} from 'react'

const useMoeda = (label, stateinicial, opcoes) => {

    // State do custom hook
    const [state, atualizarState] = useState(stateinicial);

    const Selecionar = () => {
        <Fragment>
            <label>{label}</label>
            <select>
                <option value=''>Selecione</option>
                {opcoes.map(opcao => (
                    <option key={opcao.codigo} value={opcao.codigo}>{opcao.nome}</option>
                ))}
            </select>
        </Fragment>
    }

    // Retornar State, interface que modifica o state
    return [state, Selecionar, atualizarState];
}
export default useMoeda;

我在这个组件中使用过它，但它返回了一个错误，指出“Selecionar”没有返回 null。

import React from 'react'
import styled from '@emotion/styled'
import useMoeda from '../hooks/useMoeda'

const Botao = styled.input`
    margin-top: 20px;
    font-weight: bold;
    font-size: 20px;
    padding: 10px;
    background-color: #66a2fe;
    border: none;
    width: 100%;
    border-radius: 10px;
    color: #FFF;
    transition: background-color .3s ease;

    &:hover {
        background-color: #326AC0;
        cursor: pointer;
    }
`
const Formulario = () => {

    const MOEDAS = [
        {codigo: 'USD', nome: 'Dolar dos Estados Unidos'},
        {codigo: 'MXN', nome: 'Peso Mexicano'},
        {codigo: 'EUR', nome: 'Euro'},
        {codigo: 'GBP', nome: 'Libra Esterlina'},
        {codigo: 'BRL', nome: 'Real Brasileiro'}
    ]

    // Utilizar useMoeda
    const [moeda, Selecionar] = useMoeda('Escolher sua moeda', '', MOEDAS);
    
    return ( 
        <form>
            <Selecionar />

            <Botao 
                type='submit'
                value='Calcular'
            />
        </form>
     );
}
 
export default Formulario;

此错误的图片 enter image description here

我不明白为什么会这样。因为'Selecionar' 里面有一个功能。代码中还有什么问题？

Answer 1

我看到您在 Selecionar 中没有返回，您需要更新以返回值：

const Selecionar = () => {
    return (
      <Fragment>
        <label>{label}</label>
        <select>
          <option value="">Selecione</option>
          {opcoes.map((opcao) => (
            <option key={opcao.codigo} value={opcao.codigo}>
              {opcao.nome}
            </option>
          ))}
        </select>
      </Fragment>
    );
  };

我对这个自定义钩子有问题，返回 null

1 个答案: