Как отправить установщик React-хука в другой компонент

Question

У меня есть этот вид хука: -

const [profile, setProfile] = useState({
displayName: '',
realName: '',
birthDate: '',
height: 0,
cityLocation: '',
occupation: '',
ethnicity: ''
}

Позже в коде я передаю его как реквизиты для компонента класса, как: -

  <SelectEthnicity 
  data={{profile:profile,
    setProfile: {setProfile}}} 
   />

SelectEthnicity является компонент класса. Это просто обертка выбора. Этот выбор имеет много вариантов. Вот небольшой фрагмент кода.

export class SelectEthnicity extends Component {
render() {
    console.warn("this.props.data.setProfile", this.props.data.setProfile)
    return (
            <select value={this.props.data.profile.ethnicity} // this is fine.
             // TypeError: this.props.data.setProfile is not a function
            onChange={(input) => {this.props.data.setProfile({ ...this.props.data.profile, [input.target.name]: input.target.value })}}
            name="ethnicity" ref={this.props.form.register}>
                <option value="">Select...</option>
                <option value="white">White</option>
                <option value="southAsian">South Asian</option>
                <option value="southEastAsian">South East Asian</option>
                <option value="mixed">Mixed</option>

Я получил сообщение об ошибке:

Ошибка типа: this.props.data.setProfile не является функцией

Так что порпс не является Передача setProfile как функция. Как мне это сделать?

Answer 1

В вашем примере setProfile - это объект, содержащий функцию setProfile.

Вам просто нужно удалить фигурные скобки вокруг него.

<SelectEthnicity 
  data={{
    profile: profile,
    setProfile: setProfile
  }} 
/>

Или:

<SelectEthnicity data={{ profile, setProfile }} />