[英]rendering data to react
Error: Objects are not valid as a React child (found: object with keys {title, first, last}).错误:对象作为 React 子对象无效(发现:object 键为 {title, first, last})。 If you meant to render a collection of children, use an array instead.如果您打算渲染一组子项,请改用数组。
getting 40 errors of this using this componentdidmount not sure what it means already tried looking it up使用此组件得到 40 个错误didmount 不确定这意味着什么已经尝试查找
class Search extends Component {
state = {
results: [],
search: "",
};
componentDidMount() {
API.getRandomUsers()
// console.log(API.getRandomUsers())
.then(res => this.setState({ results: res.data.results }))
.catch(err => console.log(err));
};
render() {
return (
<div>
<Navbar />
<Form />
<Wrapper>
<Table>
<thead>
<tr>
<th>Image</th>
<th>Name</th>
<th>Phone</th>
<th>Email</th>
<th>DOB</th>
</tr>
</thead>
<tbody>
<SearchResults
results = {this.state.results} />
</tbody>
</Table>
</Wrapper>
</div>
)}
Search results component搜索结果组件
const SearchResults = (props) => {
console.log(props)
return (
<tr>
{props.results.map((employee, index) => {
return (
<tr key={index}>
<img alt={employee.results} className="img-fluid" src={props.src} />
<td> {employee.name} </td>
<td> {employee.phone} </td>
<td> {employee.email} </td>
<td> {employee.dob} </td>
</tr>
)})}
The mapped employee.name
is an object with the {title, first, last}
properties.映射的employee.name
是一个具有{title, first, last}
属性的object。
Here I usually dump these destructured values into an array and join them.在这里,我通常将这些解构的值转储到一个数组中并加入它们。
{props.results.map((employee, index) => {
const {
dob,
email,
name: {title, first, last},
phone,
} = employee;
return (
<tr key={index}>
<img alt={employee.results} className="img-fluid" src={props.src} />
<td>{[title, first, last].join(' ')}</td>
<td>{phone}</td>
<td>{email}</td>
<td>{dob}</td>
</tr>
)})}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.