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

【问题标题】：HTML/JSX forms in React display as [object Object] instead of actual value in arrayReact 中的 HTML/JSX 表单显示为 [object Object] 而不是数组中的实际值
【发布时间】：2019-02-07 17:57:40
【问题描述】：

我正在学习 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);
    })
}

这是我尝试创建下拉菜单的地方（在同一组件中）：

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”，但它却显示为“[object Object]”。这似乎特定于表格。

使用 JSON.stringify(test) 返回看起来是整个 JSON 对象的字符串。为什么在 html 中的某处使用 {test} 可以正确处理该对象，但包裹在表单选项中时却不能？

【问题讨论】：

您将<div>s 放入您的数组中；像这样将 div 插入 JSX 没有问题，但 <option> 不支持子元素，这意味着变量被强制转换为字符串。默认为[object Object]。
解决此问题的一种方法是将数组映射到同时包含 div 和文本的对象：codesandbox.io/s/2okr9xjj4r
@ChrisG 这只是填充数组的单个元素吗？当我更改数组randomName: 10 的大小，然后更改var test = this.state.random[1] 时，这会中断。
randomName: 10 不会改变大小，它将this.state.randomName 设置为10。数字没有 [1]。我真的不知道你的目标是什么；您是否尝试将 JSON 回复转换为选项？同样：您的原始代码将一堆对象变成了一堆 React <div> 元素对象。将它们插入 JSX 很好，将它们插入 <option> 则不行。
我更新了代码框示例。

标签： javascript html reactjs jsx

【解决方案1】：

您可以执行以下操作，而不是在 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>
    )       
}

希望对你有帮助，谢谢

【讨论】：

你的构造函数会是什么样子？不能用我的代码编译。
仍然无法编译。无论哪种方式，我现在都知道这个问题并找到了另一个解决方案。感谢您的帮助！

【解决方案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>

【讨论】：