Question

呈现一组组件的问题。这是我的笔a link。您可以在其中看到结果。结果应该有10张卡片，但不会渲染它们。

class Main extends React.Component {
  constructor(props) {
   super(props);
   this.state={chng:0}
   }
 render() {
  return (
   <div>
    <h1>Hello from Main!</h1>
    <Card name="sample" />
    <CardsHolder />
   </div>
     )
  }
 }

class Card extends React.Component {
  constructor(props) {
   super(props);
   }
    render() {
    return (<div className="card">{this.props.name}</div>);
     }
   }

 class CardsHolder extends React.Component {
  constructor(props) {
   super(props);
  }
 render() {
  const cards=[];
  axios.get('https://randomuser.me/api/? 
  results=10&inc=name,registered&nat=fr')
 .then(json => json.data.results.map(result => (
  cards.push(<Card key={result.name.first} name={result.name.first} />)
  )))
   console.log(cards)

//我认为控制台中有正确的组件数组，但无法呈现它们

        return (<ul>{cards}</ul>)
     }
   }

 ReactDOM.render(<Main />, document.getElementById('react-content'))

Answer 1

这将起作用，注意事项：

我们以componentDidMount方法执行AJAX请求，因此我们可以使用setState在组件的最上层安装处触发渲染。
这样做时，请勿将JSX存储在组件的state中。

your code.

如何在React中使用特定道具渲染组件（对象）的数组？

1 个答案: