×对象作为React子对象无效（找到：带有键{author，quote}的对象）。如果要渲染子级集合，请使用数组

Question

我试图像这样将对象传递给React组件，但收到上述错误：

class RandomQuoteBox extends React.Component{
    render(){
      return(
        <div class="container">
          <Quote />
            <div class="row">
              <div class="col">
              </div>
              <div class="col-8">
                <div class="card" style={{
                  backgroundColor: '#FFDC00',
                  width: '500px',
                  height: '300px',
                  margin: '0 auto'
                  }}>
                    <div>
                      <Author {...QUOTES}/>
                    </div>
                    <div>
                      <Button />
                    </div>
                  </div>
                </div>
              <div class="col">
                </div>
            </div>
          </div>
        );
    }
}

这是对象引号：

    const QUOTES = [
  {author: 'test 1', quote: 'tester 1'},
  {author: 'test 2', quote: 'tester 2'},
  {author: 'test 3', quote: 'tester 3'},
  {author: 'test 4', quote: 'tester 4'},
  {author: 'test 5', quote: 'tester 5'},
  {author: 'test 6', quote: 'tester 6'},
];

这是作者功能：

    const Author =  (props) => {
  return <p>{props.quotes}</p>
}

当我在RandomQuote组件中直接将数组传递给时，它将正确显示。但是，我想拥有一个同时包含键，作者和引号的外部对象。然后分别渲染Author和Quote组件。 （我没有在这里列出Quote组件，因为一旦我弄清了，我就应该能够弄清楚那个）。

Answer 1

我认为您正在寻找的是这个：

<div>
{ QUOTES.map(quote => <Author quote={quote} /> )}
</div>

const Author = quote => {
  return <p>{quote.author} says {quote.quote}<p>
}

QUOTES是一个数组，因此要渲染它，您需要使用map()。