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”。

React-控制台警告和错误

1 个答案: