React-控制台警告和錯誤

Question

這是我有史以來的第一次React嘗試，並且我正在做一個教程，在其中觀看視頻並鍵入要遵循的代碼。 它工作了一段時間，但現在我遇到了問題。

以下代碼在視頻中有效，但在我的瀏覽器中，適用於Ubuntu的Google Chrome瀏覽器版本72.0.3626.119（官方內部版本）（64位）失敗。

let channels = [
    {name:"Hardware Support"},
    {name:"Software Support"}
];

let channelComponents = channels.map(function(channel){
    return <Channel name="channel.name"/>
});

class Channel extends React.Component{
    onClick(){
        console.log("I was clicked:" + this.props.name);
    }
    render(){
        return (
            <li onClick={this.onClick.bind(this)}>{this.props.name}</li>
        )
    }
}

class ChannelList extends React.Component{ 
    render(){ 
        return (
            <ul>
                {this.props.channels.map(channels => {
                    return(
                        <Channel name={channel.name}/>
                    )
                })}
            </ul>
        )      
    }
}

ReactDOM.render(<ChannelList channels="{channels}"/>,document.getElementById("app"));

第一個問題在圖像的第8行上。

react.js:18745 Warning: React.createElement: type should not be null, undefined, boolean, or number. It should be a string (for DOM elements) or a ReactClass (for composite components).
warning @   react.js:18745
createElement   @   react.js:9462
(anonymous) @   app.js:8

第二個問題是圖像中的第29行。

app.js:29 Uncaught TypeError: this.props.channels.map is not a function

誰能向我指出可能出了什么問題？ （本教程的作者未回復）

經過以下嘗試：

let channelComponents = channels.map(function(channel){
    return <Channel name={channel.name}/>
});

並且：

ReactDOM.render(<ChannelList channels={channels} />,document.getElementById("app"));

我在第8行的channelComponents遇到了相同的錯誤，但是map（）錯誤現在是：

Uncaught ReferenceError: channel is not defined
``

Answer 1

我有兩個問題。

首先，在您的地圖中，您似乎想傳遞頻道名稱，但是語法不正確。 您可能想改用大括號。

let channelComponents = channels.map(function(channel){
    return <Channel name={channel.name}/>
});

當您將通道傳遞給reactDOM.render時，也會遇到類似的問題。 您可能想要這個。

ReactDOM.render(<ChannelList channels={channels} />,document.getElementById("app"));

（編輯）更新問題后，剩下的問題是這樣的：

class ChannelList extends React.Component{ render(){ return ( <ul> {this.props.channels.map(channel => { return( <Channel name={channel.name}/> ) })} </ul> ) }

我從回調參數“ channels”中刪除了“ s”。