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

Question

渲染组件数组时出现问题。这是我的笔的一个链接。你可以在哪里看到结果。结果应该有 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'))  

标签： javascriptreactjs

Answer 1

这将起作用，注意事项：

• 我们在componentDidMount方法中执行 AJAX 请求，因此我们可以使用setState
• 在做那件事时，不要将 JSX 存储在组件的state.

你的代码。