Передача объекта select обратно родителю в раскрывающемся списке React

Question

У меня есть пара вопросов с моим выпадающим компонентом React. По сути, я хочу получить выбранный объект из выпадающего списка обратно в родительский компонент. Прямо сейчас раскрывающийся список работает, и я, похоже, могу вернуть {this.state.selectedUser} родителю из компонента Dropdown. Единственное, что не работает - это значение по умолчанию.

От родителя я хочу передать некоторые детали из объекта, выбранного в раскрывающемся меню, в дочерний компонент, UserIcon.

Сначала у меня есть выпадающий список, который имеет onChange. Я пытался добавить defaultValue в Select, чтобы решить проблему отсутствия по умолчанию, но пока без кубиков.

import React from 'react';

class PolicyDropdown extends React.Component {
  render() {
    let initialUsers = this.props.state.users;

    let alphabetizeUsers = initialUsers
      .sort((a, b) => {
        return a.name > b.name;
      })
      .map(obj => {
        return (
          <option key={obj.id} value={obj.name}>
            {obj.name}
          </option>
        );
      });

    return (
      <select
        onChange={e => this.props.onChange(e.target.value)}
      >
        {alphabetizeUsers}
      </select>
    );
  }
}

export default UserDropdown;

Тогда у меня есть средний компонент, который делает вызов API.

import UserDropdown from './UserDropdown';

class UserHeader extends React.Component {
  state = {
    users: []
  };

  componentDidMount() {
    let initialUsers = [];
    fetch('http://localhost:3000/users')
      .then(response => {
        return response.json();
      })
      .then(data => {
        this.setState({ users: data });
      });
  }

  render() {
    return (
      <UserDropdown state={this.state} onChange={this.props.onChangePolicy} />
    );
  }
}

export default UserHeader;

И, наконец, основной компонент, где я должен обрабатывать данные и передавать информацию из раскрывающегося списка в новый компонент, UserIcon.

class Main extends Component {
  state = {
    selectedUser: this.props.user
  };

  onChangeUser = user => {
    this.setState({ selectedUser: user });
  };

  render() {
    return (
      <div className="App">
        <header className="App-header">
          <span className="App-title">
            SELECT A POLICY:{' '}
            <UserHeader onChangeUser={this.onChangeUser} />
          </span>
          <br /> <br />
          <UserIcon onChangeUser={this.onChangeUser}  />
          Dropdown value here: {this.state.selectedUser}
        </header>
      </div>
    );
  }
}

export default Main;

Где значение отображается как this.state.selectedUser. Когда я изменил значение на просто obj, я попытался сделать this.state.selectedUser.name, но консоль пожаловалась Uncaught TypeError: Cannot read property 'name' of undefined , Я хочу передать идентификатор в качестве опоры компоненту UserIcon для использования в качестве переменной.

Answer 1

Вы должны передать пользовательский объект обратно в Main через обратный вызов. Это упрощенная версия того, как это будет выглядеть:

const UserIcon = props => <div>{props.user.name}</div>;

class UserDropdown extends React.Component {

  render() {
    let initialUsers = this.props.state.users;

    let alphabetizeUsers = initialUsers
      .sort((a, b) => {
        return a.name > b.name;
      })
      .map(obj => {
        return (
          <option key={obj.id} value={obj.id}>
            {obj.name}
          </option>
        );
      });

    return (
      <select
        onChange={e => this.props.onChange(e.target.value)}
      >
        {alphabetizeUsers}
      </select>
    );
  }
}

class UserHeader extends React.Component {
  state = {
    users: [
      {name: "thompson", id: 1},
      {name: "anderson", id: 2}
    ]
  };

  handleChange = selectedId => {
    const selectedUser = this.state.users.find( el => el.id === selectedId);
    this.props.onChange(selectedUser);
  }

  render() {
    return (
      <UserDropdown state={this.state} onChange={this.handleChange} />
    );
  }
}

class App extends React.Component {
  state = {
    selectedUser: {
      name: "",
      id: ""
    }
  };

  onChangeUser = user => {
    this.setState({ selectedUser: user });
  };

  render() {
    return (
      <div className="App">
        <header className="App-header">
          <span className="App-title">
            SELECT A POLICY:{' '}
            <UserHeader onChange={this.onChangeUser} />
          </span>
          <br /> <br />
          <UserIcon user={this.state.selectedUser} />
          Dropdown value here: {JSON.stringify(this.state)}
        </header>
      </div>
    );
  }
}