我正在学习React,并且没有Java脚本背景。目的是使用从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}可以正确处理该对象,而包裹在form选项中却不能正确处理?
答案 0 :(得分: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 });
})
}
,然后在render方法中:
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>
)
}
希望这会有所帮助,谢谢
答案 1 :(得分:0)
<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>