Javascript React中的HTML/JSX表单显示为[object object]，而不是数组中的实际值

我正在学习React，没有Javascript背景。目标是使用从API获取的值构建一个下拉菜单。我表单中的每个选项都显示[object object]，而不是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);
    })
}

componentDidMount（）{
取（'https://randomuser.me/api/?results=10')
。然后（结果=>{
返回results.json（）；
})。然后（数据=>{
让randomName=data.results.map（（信息=>{
报税表（
{info.name.first}{info.name.last}-{info.email}
)
}))             
this.setState（{randomName:randomName}）；
log（“state”，this.state.randomName）；
})
}

下面是我尝试创建下拉列表的地方（在同一组件中）：

render（）{
var test=this.state.randomName[0]；
返回(
{test}{/*此处按预期打印值*/}
{test}{/*值在此处打印为[object]
首末-none@none.com
首末-none@none.com
首末-none@none.com
)       
}

我希望下拉列表中的第一个选项显示为“someFirstName someLastName-someEmail”，但它显示为“[object]”。 这似乎是特定于表单的

stringify（test）返回整个JSON对象的字符串。为什么在html中的某个地方使用{test}可以正确处理该对象，但在包装为表单选项时却不能正确处理该对象？

<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>

let Dropdown=mui.react.Dropdown，
DropdownItem=mui.react.DropdownItem；
类示例扩展了React.Component{
建造师（道具）{
超级（道具）；
这个州={
随机名称：“”
}
}
componentDidMount（）{
取（'https://randomuser.me/api/?results=10')
。然后（结果=>{
返回results.json（）；
})。然后（数据=>{
让randomName=data.results.map（（信息=>{
返回(
{info.name.first}{info.name.last}-{info.email}
)
}))
this.setState（{randomName:randomName}）；
log（“state”，this.state.randomName）；
})
}
render（）{
返回(
{this.state.randomName}
);
}
}
ReactDOM.render（，document.getElementById（'example'））；

您可以执行以下操作，而不是在componentDidMount的状态中添加div：

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>
    )       
}

renderInfo=（）=>{
const{randomName}=this.state
返回(
{randomName.map（（info）=>{info.name.first}{info.name.last}-{info.email}
)
}
render（）{
返回(
{this.renderInfo（）}
)       
}

---

希望这可能会有所帮助，谢谢你在数组中放入

s；像这样将div插入JSX没有问题，但是

不支持子元素，这意味着变量被强制为字符串。默认值为

[object object]

。解决此问题的一种方法是将数组映射到同时包含div和文本的对象：@ChrisG这只是填充数组的单个元素吗？当我更改数组的大小时，

randomName:10

，然后

var test=this.state.random[1]

，这会中断。

randomName:10

不会更改大小，它会将

this.state.randomName

设置为

10

。数字没有[1]。我真的不知道你的目标是什么；您是否正在尝试将JSON回复转换为选项？同样：您的原始代码将一组对象变成了一组React

元素对象。将它们插入JSX是可以的，但将它们插入

不是。我更新了codesandbox示例。您的构造函数是什么样子的？未使用我的代码编译。仍然无法编译此代码。不管怎样，我现在知道了这个问题，并找到了另一个解决方案。谢谢你的帮助！

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>
    )       
}