我正在编写一个程序,其中通过状态将数组中的项目列表从App组件传递到QuizApp组件,再从该组件传递到Turn组件。我想问题是Turn组件无法读取从AuthorsQuiz组件传递的道具。
我试图将状态对象转换为数组,但仍然发出相同的错误:
TypeError: Cannot read property 'imageUrl' of undefined
App.js
import React, { Component } from 'react';
import AuthorsQuiz from './Components/AuthorsQuiz';
import './App.css';
import {shuffle,sample} from 'underscore';
const authors =[
{
name: 'Mark Twain',
imageUrl:'data:image/jpeg;base64,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',
imageSource:'Wikimedia Commons',
books: ['The Adventures of Huckleberry Finn']
},
{
name: 'Joseph Conrad',
imageUrl:'data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAkGBwgHBgkIBwgKCgkLDRYPDQwMDRsUFRAWIB0iIiAdHx8kKDQsJCYxJx8fLT0tMTU3Ojo6Iys/RD84QzQ5OjcBCgoKDQwNGg8PGjclHyU3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3N//AABEIALoAiwMBIgACEQEDEQH/xAAcAAACAwEBAQEAAAAAAAAAAAAEBQIDBgcBAAj/xAA8EAACAQMCAwUGBQMDBAMBAAABAgMABBESIQUxQQYTIlFhMnGBkbHwBxShwdEjQuEzUvEVJGJyNDWDF//EABQBAQAAAAAAAAAAAAAAAAAAAAD/xAAUEQEAAAAAAAAAAAAAAAAAAAAA/9oADAMBAAIRAxEAPwDLglUUId8ZJ8hmmVtCwwxYAdcj16fWqYYAVjVfEoy2rpz3FMVjjkhXBO/sk8gaAyKcd2qjSCAdwNqLtZh/U7zZRkH09fjQNtAUXTpB1HIYfSvpIi1w2F0oW3HPB99B7fzKZNIGrJ6c18qrjIkYjRuCCNPWvJFkOo7HUPAV5nfnXkrrwu0kubpjpTJUA5zy2oHPBytsyMNQDZJA6beVOZyJrQErqjHiU4643rjn/wDQeLWkrIkdu8atjDJ+9DX3bjtFe2/dtcd1GTyijA9cUHUxcsuWCqqDlgfrmqbu7hAOmaP2vEA3y2rjh4hxS5cLJdXD6FOMOds1dHw29ys8bSHXjW2SDy60HVLaVLmFmiYmFiME4zVLqo1K3Nf7unxrndtacdsHcW1zMoJDbcmyOopzZ8Y45bSqHszcRMwDsBqLeo+XKgfTa4JdRUBlJOR1J+xUvzXeR8+e7Y884qi5vY7kB1wVJweeTnoff+1G8Oij7piBhgp289+f35UFVjLoHjB0qRqXlk+vyqT3JEqKmBGOp5rg9DVsdpLMZHjUKrjJHUdN/hXiwtG0qvFrzvnHL1oGcEqzhYm9r0G+P5q0QgbHG1ecOtBlQigA4b39d6Zqxx4FwvTxUGOtYhLbju1JxsRnGPd76lkQFh3bBcDYjJqiCdo2yAFAx03x/NHysZbZdQ0yHcHnsBy9KD62mRSAuAqtg6vX7xV6XEaS6VOVLZJzyPlQqKktq5lTB/t09P4r6G1aKUKy4Ub8vMbfzQEAJqOdQ1HIIO4NIO13EreOBbXWdZUFUI5ZGM024jLHw2yluZSCkZGQNsk8hWbtbI3k7Xt6mtmGrx8sHkPdQZMcOkmlJWMnLAbggH1xWo4L2WmuGHexya9iAV2xnY1s+C8CttEUuoalTBGMlq1dlaQ2yr3PUe0RQZjh/YyEQaXjCs3Nt8860idmLNbZohjxc9udNg65AG5G+Kuhkzg4zg4zQJE7M2zbSqDgeHHPNZfifFG4PJ+WFv3Jj3yFBXPkc7jnzrpSK58W4xzrFfiDYJNGjq2mZdR9n29thQYDi3EGvbpBAYhNpJUxY8WMcx86f8IuTPbHUEjnRgJFPIt6HqKy9paBZB38YxrLd4DjRg9MeWTt1zWj4fC8t2kQ8IkXwluuD4SfIb0DqFGCNnDEbELzojuVwNQ/tAOOp8vdULS2aEFjgLnJ9d6LiGmIgAM3PJHLb+c0A9sxjlGNhuCOeDj+KNZ4MnBwOg00v0kOZFzu2GJ6DaixIigKGIxttQZLRIZGAGhsDYLkhaOtLaQ4Rjh1Od8bivEII/rk6jyIxuBmiolVYwRgAbZ5ZOaCoR+NRnSCfECDzo7wqjKxGcaVznflj79DS8z5Ys+2kkZPX75VYXluJd1Ug5LNnORnmf1+dBku3nERJeW/D12VVEsgAODk7Z+VGcNulSGPVGWIzqPpjHlWeln/AOqcdnuZEzC0mFXOMAZAFa1bKCK1DCRgdww2znbPyoGvDOKIZRBnuwG8RP36VpbR3lj2jHiOQw8sVj4rMSNKwDiUNlGBx8PvzrTcPdoMglgi81zy9aBzAMqTsFI2JFH26nugWUDHQClNnOGnUH2MMNvKmAnAcxY9nGM0BoOkas6hsaynbuITRnBIJTGx3z6VpFuYxGxKnOcYz50i7Q2sl0mqBA+nBx5nrQc3voXi1I2zYywHIHpv986+4XxST8pouh/3EXhIG+tT50x444C6XVdMiEBzyz1Hp5/A1m42lW9OllJZDH4RjUcZ+FB0XhN0brh8Tkhnz59KtnuY0RxyG2P5pB2CkeYyQMPGgzjG+Mn/ABTu9to5TJpJwASFPuoLkKSh/Eo2yQeefvagpHk7xsRIRk76alEmnIchGY7GvGKajhmG/WgXIjtGqNJjcMD6gdasiy0hBUFQNWM7e/FWFZFBMapg7nIwc+VepnDSSj2V5DyoKrxdabZUMwx9/fOs12j7QJw60/JQHE0y4dg26Kdh8a0Vwqy4K6yFbfbOdhWc7acIhMA4lLG7OhCvpORjzNBlbS8WF1aYDAX2VA6cq1ltxWA22rvFMffE8hvtuP1rCzmFizLy04Ycsn9q0HD+AX3EOAiVICFDiRGC+0Mf80G5s+K8NtreO4eUZKhcnyxtmnPDOL8MvWSOC4UNLgEBunlXCJ4374xvNtkenTyrQ8J7I8YlaG5snKy41RknAbGds/MUHelgkjOqL2GO4Ybiot3qksdJ6LjrWW4L2m4gssVpxqD8vLHgsx2D/wCa1Yd2CtCV0H+7nsP+aAMzExss3gcNnBPPrRsEqS6TyDZVs9GH/NUrZxTSAuSWVv7vnVBjXhsqRoW7qUNrBOenT1oBuLdn0vXcoulzuQoGkgfvWdvuyzR2zAImFJYMvvG/y+ta7hE7PLoUupC6dzzHSmPF7iOGAReEFhybqKDmvZuxls+N3biXTEgA0jkR0/mn82UZzuScNjyoLhmIpJ38BDSBR1GBnNMLgI9qwQkEjbzoBgXLlWxpDHJJ+f1qxVXTvj5UIfC/jGF58uXpUzPHnxJk9SKCiJgGyTjB3B6c6re4KFggyTzXPMYqR5f1Dpxvjnz6V4iAnUPDpB5ig8iVxIhyurBJOeZoXtXIYey99qk7oMmkAHc5IyKPCBIGAxqAJLD6Uh7bwyz8GnWIFhHokbPLbB/SgwnAOF/9V4rBZgnS28g8h1/iv0RFwhLfs8tjDEEUpgKCPDkVzD8FuFiW/nuZYypOyMx6CuwXkptXDuyrEcA6uQoPzf2p7PzWXaKWxWI62XvE9QR/itJ2E4lx7hx/KtbfmLFPZilyCBsfC3T0rVfiXwg3t1Z8QthpuosqDq2ZelA8E4zNbBYL+DTIvmeXkaDVXKpxPhqNe2M0TvgkMAdJ2wdvfR3AkMMfdszlVHsMd19Ko4ddxXSRuMnYjA8uf7UZbpHFOdAIBGdhzzzoGUcShyygHO+eg9K9ntlmCYVScHIx6UG93Dbx+BixONgM9f8ANMeGzmRFml8I8qBdaWcaPHJIAiIBlhtnp/NHXNvbO/fCAXM6p4ULbAUJ2kUz8Lb8u+mYsFjI6HSSPpSnsRxq/vLBbbi1v3M8GpZJCMZx1NAr4hJBIq3FpbC2Nxq7yLmVdWKnHocCvlbQME79fSveJv3947xHRCW8AxyGc/OqXYSp3SHxMN/l9mgtIjli8ClZMcm5HGBQ67DCvt02Ne3jNbprQA4ABBO5FCtJOrEADHTfFBJAufFuRv8AHyq9lVsNgpgbe/B5VHBlAKHbOMCrQCCO99pcnI8/OghGVWMoPFzJbHlQ/FFL8JvjGmthC+FZdm2ohYUWMEnKjOrVviqbjivD7OGVpLiMpp8S8zy3wKCX4U31uokLjQVAG/IfeK6BJPw7isEsIuIZAVw2GB6f5rhfALTiE9zdi1m7iOcMUDr4SpOfpWp4FwaGO8We5DFx4taMV2A3Gx5b7UFtnxMW3F7zs/xJmliTV+Ukk5lDyX4URxrhUTWSz28cbKq4xncbc6O4vwGy4tD3tqwF5Hho2A5NggA1d2eQ3dj+XuCRKo0yRsOZx5+/egXcI/oMqCTOG1ZJ2xjkfpWiV+9fu0JBGQB/tz9etI5rK4sr1oUcshyoJ+/StVYxBYEIQasbsebfzQEWNjFHEE0q2AMk++rrpUgs5ZsBCNwPM0VbhVXZBnP6VmvxGa+fhFtBwsDvDcLI++DoU5oCLEPJcwQt3oUgPKpXJB6DNQ43eQ65bC1RE5mRk3J9CanccbFpbxJJFou50LDB6+dIQh1asjBOSx65xQVXSIEAALasBcH7618Lb+rrVgF6gdPvFETQiRdWQGQ9D0xVEAcuwc41BWxnGdjz+FBG7WOZgrJhgAck7bUruA5mYmTHpjlTVnGpQwwcY1+6hWjUsT3cbZ6nrQWxo8bhFOSRhT/irWXrHpHmCd96nJE6sqAYCrlcrzOc8/1qm6mtrPR+auo4wPXkcZxQRMQSUMrHSy+MNjqP8UmvezVtdnvZCyFySy4G56ffpVd92w4bFLlNcrnfTGvUjzpLffiBK8ZW1tVXSw3Y7/fOg84Vx+fhd2Uu4JLmJV7qNsbLpbA+HKnEXHYUheSWLQ05C4VCNK+Z8/Kh+CRCWFJS2Y7k6iPLf6nNauGyksI1t++EsRQvh1ycDbr7/wBKBRNxyGzOI8wo4jDkHcdAcj1q/g/FLueeG5jXwZCkZAzuRuffRp4NacTQrJBbr5kLv94oDs3YLwO+NncHvLdiGGd8Zbn6daDc3VvJJC0zrGH2YA74PL50ygtxoXcYx+9UZ1ROFwTp/ejYWZlORhR05UF+FjzkHTzJ9aq7pbuXVpBPLceyKERLm/uFaHItkJ8TjZqdW8UcEYUDAHMnr60HNPxOult+NWsMGlRbW+c56kk/oN/jVHCbiK/t0mj2dQS6Hp6fvSXtVex8T4pczh/9VyyHn4RsP0oLhF3PwyeTSgeLHjB6Y6+/JxQa95u6B1qPTzOKokbvSSoyQN/IbVRZ8YsrltHed0zbEPvjf7FXyQhn1xuoBO+OvPegmZlZP9PwgYG/Oq2KajiOT4Dar0gUxhFxtkZPuqppZ4zoChcdPKg5ZedouKXeoTXTk5zgHSMeW1As8hjBLsx22Y+tR7sN4B7fNznbGa+wpkQatgpG9BZ3QR3ZvZK5BDDlj/H60PI6goMaG1Yzj1xVyJuVY6gcFdXkBtmqXMYchsafd9PfQdF7J8Ou4YopJB4AoMSgcuRz8NvnWwgsZLmNZbjKzd0qhRvkDOT8yaj2FJveBWMzYafQWIzkenyGPnT1Y2ivE0IWTuQrFts7k5/U0Cq04VIsrRMxVyCQfMDBombhqNFEwVEdxjWvM56+/rR95I4haVF1S4UDVsdyP5q+1sriWIQXHhxjH77/AKUAsBkFwtvEiyMEI8B5CtLBbIqATAM3Mg8q+s7OK1QLEu5HiYjc0RI8cUZkldURRksxwAKD0acgYGBsKy3b3tHb8F4YbXvP+8u1KIo30jG7H4bD1Ipf2m7dLBqtuCqGlOzXDjwr6qOtcwmmnv8Ai73N3O8siruWOdTevu5/GgIlK4L6V1A4IHlnp8KuhZi7Mw2ZcnpqNUMYkHMsdO2r2fdVmSZSCBpyCR5DagDdFSXXs5QhgvQ7n9qNtuIyWzuYZCFOMgjYgioXa90quVABzy68/wBxQPdaHBBDZOdPXFBqLDtAqvpvEw3Iug25fvTL81bSeNZkYNuGJG9YcyYSR1AOokjPTJ3/AGohbaJ1DtzIycUGMBWJQpAVWAG3U1SuNQyScnB9KlHAC+Bk6RqGBRfdjAKH+mfPb3/KgGmDspCkHwggH+arMUjKdQB052/2jY0QIGKoXOnAA267V8/g3K4JOxHX7FBpeAdtr3gfCXs4YYyVcsh08gcbevpUbr8R+NX8kRj0QFfaZdyx686X9kOEHjvaC1sHz3TFncjoqjr+g+NMO2nYqXg07SpEWgJJBAPL7zQPOAcY4hxOMy3k7tKHUuvs5wM7fACu32xSeGKZDs6Bgc1+ZeBX1xazq0dw+pfCVG429K6pwvtNf2nCUhmfuYhGQGePLIP9w896DVdpO11lwUtbRYuL7G0QOw26+vpWJ49xu64pbx5mIkVsGNhhT7hSm5gvY5JLwRST2zED8y6kCQnHX51EnHeTM3XVtuPhQD3LLFH3jkyuEwW6UosJcwtKdmlbO331xTDiUyRQ4fWRJjIUDfel0aBWUA+JcezyG3KgM1K7MLgEkjUCud6JGVYopJAI2P8AcKEURpMyPug3xzztU3lNs7Ao04cEKBuQfX3c6AuXGpA/iKkYxyx5UsfXHI7sAjZ0hj5cv0zUo755VMZPhIbdRk5zVBcybOzYUgbnntj9edBeNPdaSzHckHTyOKtEjqAEnCqBsuBtUQf6aNgsCTt1Axz/AEqli8h1mJjnrQZ+2jLJpck5wOex23NekuZEjVCRpxy+/P8ASjEKIwxokXbkPoPSpqqGdTF3mrIIyfOgqjgEMRade8UHIBO/LGaVO69+xVDz2B6U04vhIcRNpAbOg8uXSlTICEO66vEcUHTPwK4V3vEeJ8SlUMIUWFCfNjqP0Fbn8SSIuzcoZR/UZVyem9KfwKtwnZi8nx45b1ifgiijfxecHs4kQOXkm8IA54yaDi/CEe54tEkCJ/Vk0sxHLpmux9n+z8nFZ2k4oFXh9mwWNQc98RjOT5DH1rmfZ2yezf8AOXLiESIRGpX2icbj3V1Dj/FYLHhS8D4XIXSOMCaVTuc+Ij47k+/FAo7bcf8A+oXQsrQ6LCAYGBgM3n7hyrMXUp7mPopG4XkTmrrn2CkmoKFwBz6UHdKfyxOTgkYA2xvn9aBfc3J79NTlMEYKkHGOVFwBzbh8Z1Nvk76qWMB+Z1oS0SbsOpOefx2o61jzpAchmOxJ29/x5UE3dJEHdLpCnw7ZBOds1CG4fTh3wUY6dumR+4/WvJ1a3CByYyw8JHu/xVUmmSbPRVz4T8fp+tBfcQrJl1UrIWGoKux88ULHssoOAA2wI65NGzXLxBH0qDgCI4z8/vpQoAaZ8LyAzv1xz+tBeJgwADlGZME45ZHT3VFsaiTMUJ30jOBU7dGPd6kK4yMk52x9/OvZ0DysyyuAfIE0C5oCsSqg1M39w2yD/wAUZZKADJIoBUY1EdfSpm2Zn7yNvZwraeQ9K8u45PyTJuNWcDy9/r1oM/xTFxKxhY4U4GduXX9KjEn9EDSCwPXyzV/5fW6odTlTz5b9KthtpHbG+oE4+PKg7Z+EEPddi4Dg5eeVskc/FjP6Vn+33HE4hxhrWA5t+GAl2HWQ/wAD6047JcUTh34em4yNUBlQY6tnI+tc8a7la3ubVdzcTa2mI9B/igps9F5bcOiYyBUUrudsFs/xTqHSluQW0yKeo86X2cBDrJoJUezjbrimBB3DD3En5UA86f1XOdYwNJx7qXXLFYmLM2oEnzo6Y6l1DOrYZ/8ALbb9qWXx7vw5JPl54oAbWUv48ggnByeXWjrdD3WWbZVAKj0yaX2aGbxA7l8kEYGN6Y920aYdSvUjPy+lATNo7iRZcMwPMDcbHl+hoARs83exYeJmxvVrrI8eWGMLuPL+edWBFSNUP92S65oPZwSZDIA+FCxHG4FURQPEzySR5MuPDzx5/tRbwsElVG0DI04GcDO/7CrDEzQapEz3QOMHc+o+QoBtbZVSpA8h1PIn9qsaHJJETEf+9VmIh1KxnBYk4PTnj6VCSeSN2TcYOMFc0FlmwLFUVcH1ydqD4zeDUkapgKOYzgnHp6mjrUAwMcDIPP4Unvf9Zfv+2gHjkVtIGxIzkdfPHrRdqztKinOFzsOeKBi5LTKw3i381+ooHdpfTRcFl4WXHdGUSnzGNsCvoAoC82z7RPU+fyoGw8Vymd905/GjI9mXG2380FsDaFRViV1AyCDz5n9atEvd6iqKwJACnfTkfXrQdr7K/wDutSfmnuP1oCL2eJYw52OQuPOkfFbkXFwgXkhIX164pjKB+W5D2v2FJOJADBAwcHl7qAqzeJMGTdS5LLy291GjRK+CSzDb1NL7QDu026t+1Exf6n/6fsaA6NIcSTys4jjX50vESzu1wM5fbc8hRN3/APVqfOQ5qNr/AKvxb60HvECYEHJT4WLHkp6D9ap4bdSHS/eIShACHnk53/mruOf/ABm+/wC2s/aE6uZ50GlkbL4JVQU58vdUO8Y8tvSiSqmGLIB3HT/xFVnbAHkPpQf/2Q==',
imageSource:'Wikimedia Commons',
books: ['Heart of darkness']
},
{
name: 'J K Rowling',
imageUrl:'data:image/jpeg;base64,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',
imageSource:'Wikimedia Commons',
imageAttribution:'Daniel Ogren',
books: ['Harry Porter and sorcerers stone']
},
{
name: 'Stephen King',
imageUrl:'https://vignette.wikia.nocookie.net/stephenking/images/a/a0/Stephen_king-coming-to-boulder.jpg/revision/latest/scale-to-width-down/275?cb=20170530002714',
imageSource:'Wikimedia Commons',
imageAttribution:'Pingiun',
books: ['The shining', 'IT']
},
{
name: 'Charlse Dickens',
imageUrl:'https://www.biography.com/.image/ar_1:1%2Cc_fill%2Ccs_srgb%2Cg_face%2Cq_auto:good%2Cw_300/MTE5NDg0MDU0OTQ1MDM5ODg3/charles-dickens-9274087-1-402.jpg',
imageSource:'Wikimedia Commons',
books: ['David Copperfield', 'A Tale of Two Cities']
},
{
name: 'William Shakespear',
imageUrl:'http://shakespeare.mit.edu/shake.gif',
imageSource:'Wikimedia Commons',
books: ['Hamlet', 'Macbeth', 'Remeo and Juliet']
}
]
class App extends Component {
constructor(){
super();
this.state=[{
turnData: '',
}]
this.getTurnData=this.getTurnData.bind(this);
}
getTurnData=(authors)=>{
const allBooks = authors.reduce(function (p,c){
return p.concat(c.books)
}, [])
const fourRandomBooks = shuffle(allBooks).slice(0,4)
const answer = sample(fourRandomBooks);
return{
books: fourRandomBooks,
author: authors.find((author)=>author.books.some((title)=>title===answer))
}
}
componentDidMount()
{
console.log("Inside componentDidMount"+this.getTurnData(authors));
this.setState([{ turnData: this.getTurnData(authors) }]);
}
render() {
return (
<div className="container-fluid">
<AuthorsQuiz data={this.state.turnData}/>
</div>
)
}
}
export default App;
AuthorsQuiz.js
import React, { Component } from 'react';
class AuthorsQuiz extends Component {
render() {
return (
<div className="container-fluid">
<Hero/>
<Turn books={this.props.data}/>
<Continue/>
</div>
)
}
}
const Hero=()=>{
return(
<div>
<div className="jumbotron jumbotron-fluid">
<div className="container">
<h1 className="display-4">Author Quiz by Smit Sanghvi</h1>
<p className="lead">This is a modified jumbotron that occupies the entire horizontal space of its parent.</p>
</div>
</div>
</div>
);
}
const Books=(props)=>{
return(
<div>
{props.title.name}
</div>
);
}
const Turn=(props)=>{
//console.log(props.books.imageUrl);
return(
<div className="row">
<div className="col-sm-5">
<img alt="pic" src={props.books.imageUrl}></img>
</div>
<div className="col-sm-7">
{props.books.map(title=>
<Books title={title} key={title}/>)}
</div>
</div>
);
}
const Continue=()=>{
return(
<div>
</div>
);
}
export default AuthorsQuiz;
答案 0 :(得分:0)
您可以做类似的事情
<div className="col-sm-5">
{props.books && <img alt="pic" src={books.imageUrl} />}
</div>
<div className="col-sm-7">
{props.books && books.map(title => <Books title={title} key={title} />)}
</div>
注意::<Turn />
函数组件是在调用<App />
的{{1}}之前呈现的,因此:
在您致电componentDidMount()
时,Turn.props.books.map(title=>...
仍然是this.state.turnData