HTML / JSX формы в React отображаются как [объект объекта] вместо фактического значения в массиве

Question

Я изучаю React и у меня нет фона Javascript.Цель состоит в том, чтобы создать выпадающее меню, используя значения, полученные из API.Вместо того, чтобы отображать фактические значения, каждая опция в моей форме отображает [объектный объект], а не значения из API.

Я могу отобразить весь массив или любые значения из массива где угодно, кроме моих форм.Я полагаю, что проблема заключается в недостаточном понимании того, как формы (и, возможно, объекты Javascript) работают для отображения.

class Test extends React.Component {

constructor() {
    super();
    this.state = {
        randomName: [],
    };
}

Вот где я получаю данные из API:

componentDidMount() {       
    fetch('https://randomuser.me/api/?results=10')
    .then(results => {
        return results.json();
    }).then(data => {
        let randomName = data.results.map((info => {
            return(             
                <div key={info.results}>
                    {info.name.first} {info.name.last} - {info.email}
                </div>
            )
        }))             
        this.setState({randomName: randomName});
        console.log("state", this.state.randomName);
    })
}

Ивот где я пытаюсь создать раскрывающийся список (в том же компоненте):

render() {      
    var test = this.state.randomName[0];        
    return (
    <div>               
        {test} { /* value prints as expected here */}           
        <form>
            <select>
                <option>{test}</option> { /* value prints as [object Object] here */}    
                <option>first last - none@none.com</option>
                <option>first last - none@none.com</option>
                <option>first last - none@none.com</option>
            </select>       
        </form>
    </div>
    )       
}

Я ожидаю, что первая опция в раскрывающемся меню будет отображаться как «someFirstName someLastName - someEmail», новместо этого он отображается как «[объект объекта]».Это, кажется, характерно для форм.

Использование JSON.stringify (test) возвращает то, что представляется строкой всего объекта JSON.Почему использование {test} где-то в html правильно работает с этим объектом, а не когда оно заключено в опцию формы?

Answer 1

Вместо добавления div в состояние для componentDidMount вы можете сделать следующее:

componentDidMount() {       
    fetch('https://randomuser.me/api/?results=10')
    .then(results => {
        return results.json();
    }).then(data => {
        let randomName = data.results             
        this.setState({ randomName });
    })
}

и после этого в методе рендеринга:

renderInfo = () => {
   const {randomName} = this.state 
   return (
        {randomName.map((info) => <option>{info.name.first} {info.name.last} - {info.email}</option>)}
   )
}

render() {             
    return (
    <div>                       
        <form>
            <select>
                {this.renderInfo()}
            </select>       
        </form>
    </div>
    )       
}

Надеюсь, это может помочь, спасибо

Answer 2

<div id="example"></div>
<script type="text/babel">
  let Dropdown = mui.react.Dropdown,
  DropdownItem = mui.react.DropdownItem;

class Example extends React.Component {
  constructor(props){
    super(props);
    this.state={
      randomName:''
    }
  }

  componentDidMount() {
    fetch('https://randomuser.me/api/?results=10')
      .then(results => {
        return results.json();
      }).then(data => {
      let randomName = data.results.map((info => {
        return(
          <DropdownItem key={info.results}>
            {info.name.first} {info.name.last} - {info.email}
          </DropdownItem>
        )
      }))
      this.setState({randomName: randomName});
      console.log("state", this.state.randomName);
    })
  }
  render() {
    return (
      <div>
        <Dropdown color="primary" label="Dropdown">
          {this.state.randomName}
        </Dropdown>

      </div>
    );
  }
}

ReactDOM.render(<Example />, document.getElementById('example'));
</script>