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

Question

我正在学习 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} 可以正确处理该对象，但在包装在表单选项中时却不能正确处理该对象？

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

希望这可以帮助，谢谢