gpt4 book ai didi

reactjs - ×对象作为React子对象无效(找到: object with keys {author, quote}). If you meant to render a collection of children, use an array

转载 作者:行者123 更新时间:2023-12-03 07:52:29 26 4
gpt4 key购买 nike

我试图像这样将对象传递给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'},
];

这是Author函数:
    const Author =  (props) => {
return <p>{props.quotes}</p>
}

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

最佳答案

我认为您正在寻找的是这样的:

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

const Author = quote => {
return <p>{quote.author} says {quote.quote}<p>
}
QUOTES是一个数组,因此要渲染它,您需要使用 map()

关于reactjs - ×对象作为React子对象无效(找到: object with keys {author, quote}). If you meant to render a collection of children, use an array,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60564489/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com