英文:
React.js Duplicate key and Unreachable code BUGS
问题
你好，我正在学习React.js，现在正在制作一个ChatApp。以下是我的错误和代码。
> ./src/App.js 第10行第7列：重复的键 'currentUsername'
> no-dupe-keys
>
> ./src/components/ChatScreen.jsx 第35行第5列：无法访问的代码
> no-unreachable
>
>
> 搜索关键字以了解有关每个警告的更多信息。要忽略警告，
> 在前一行添加// eslint-disable-next-line。
import React, { Component } from 'react'
import Chatkit from '@pusher/chatkit-client'
class ChatScreen extends Component {
constructor(props) {
super(props)
this.state = {
currentUser: {}
}
}
componentDidMount() {
const chatManager = new Chatkit.ChatManager({
instanceLocator: 'v1:us1:1308c34d-00c3-4257-b1c3-647cf56fd5fa',
userId: this.props.currentUsername,
tokenProvider: new Chatkit.TokenProvider({
url: 'http://localhost:3000/authenticate',
}),
})
chatManager
.connect()
.then(currentUser => {
this.setState({ currentUser })
})
.catch(error => console.error('error', error))
}
render() {
return (
<div>
</div>
)
const styles = {
container: {
height: '100vh',
display: 'flex',
flexDirection: 'column',
},
chatContainer: {
display: 'flex',
flex: 1,
},
whosOnlineListContainer: {
width: '300px',
flex: 'none',
padding: 20,
backgroundColor: '#2c303b',
color: 'white',
},
chatListContainer: {
padding: 20,
width: '85%',
display: 'flex',
flexDirection: 'column',
},
}
return (
<div style={styles.container}>
<div style={styles.chatContainer}>
<aside style={styles.whosOnlineListContainer}>
<h2>Who's online PLACEHOLDER</h2>
</aside>
<section style={styles.chatListContainer}>
<h2>Chat PLACEHOLDER</h2>
</section>
</div>
</div>
);
}
}
export default ChatScreen;
希望这有所帮助！
英文:
Hi I'm learning React.js and I'm making a ChatApp right now.
Here is my bug and codes.
> ./src/App.js Line 10:7: Duplicate key 'currentUsername'
> no-dupe-keys
>
> ./src/components/ChatScreen.jsx Line 35:5: Unreachable code
> no-unreachable
>
>
> Search for the keywords to learn more about each warning.To ignore,
> add // eslint-disable-next-line to the line before.
import React, { Component } from 'react'
import Chatkit from '@pusher/chatkit-client'
class ChatScreen extends Component{
constructor(props) {
super(props)
this.state = {
currentUser: {}
}
}
componentDidMount() {
const chatManager = new Chatkit.ChatManager({
instanceLocator: 'v1:us1:1308c34d-00c3-4257-b1c3-647cf56fd5fa',
userId: this.props.currentUsername,
tokenProvider: new Chatkit.TokenProvider({
url: 'http://localhost:3000/authenticate',
}),
})
chatManager
.connect()
.then(currentUser => {
this.setState({ currentUser })
})
.catch(error => console.error('error', error))
}
render() {
return (
<div>
</div>
)
const styles = {
container: {
height: '100vh',
display: 'flex',
flexDirection: 'column',
},
chatContainer: {
display: 'flex',
flex: 1,
},
whosOnlineListContainer: {
width: '300px',
flex: 'none',
padding: 20,
backgroundColor: '#2c303b',
color: 'white',
},
chatListContainer: {
padding: 20,
width: '85%',
display: 'flex',
flexDirection: 'column',
},
}
return (
<div style={styles.container}>
<div style={styles.chatContainer}>
<aside style={styles.whosOnlineListContainer}>
<h2>Who's online PLACEHOLDER</h2>
</aside>
<section style={styles.chatListContainer}>
<h2>Chat PLACEHOLDER</h2>
</section>
</div>
</div>
);
}
}
export default ChatScreen;
Could you help me?
答案1
得分: 0
./src/components/ChatScreen.jsx第35行:5: 不可达代码 no-unreachable
此lint错误警告您，在render方法的顶部有一个return语句，下面跟着永远不会执行的代码。即，这段代码使函数的其余部分变得无用：
return (
<div>
</div>
)
- 重复的键 'currentUsername' no-dupe-keys
此错误出现在App.js中，您尚未与我们分享它。但它告诉您已经给一个对象添加了两次属性 currentUsername。例如，也许您有类似这样的内容：
const myObject = {
currentUsername: 'bob',
currentUsername: 'alice',
}
或者尝试创建一个具有相同问题的组件：
<ChatScreen
currentUsername="bob"
currentUsername="alice"
/>
英文:
> ./src/components/ChatScreen.jsx Line 35:5: Unreachable code no-unreachable
This lint error is warning you that you have a return statement at the top of your render method, followed by code that will never execute below it. Ie, this code makes the rest of the function useless:
return (
<div>
</div>
)
> Duplicate key 'currentUsername' no-dupe-keys
This error is occurring in App.js, which you havn't shared with us. But it's telling you that you've given an object the property currentUsername twice. For example, maybe you have something like:
const myObject = {
currentUsername: 'bob',
currentUsername: 'alice',
}
Or are trying to create a component with the same issue:
<ChatScreen
currentUsername="bob"
currentUsername="alice"
/>
答案2
得分: 0
第一警告
> ./src/App.js 第10行:7: 重复的键 'currentUsername' no-dupe-keys
你的状态声明中有一个重复的键
constructor() {
super();
this.state = {
currentUsername: '',
currentUsername: 'WhatIsYournameScreen',
}
this.onUsernameSubmitted = this.onUsernameSubmitted.bind(this)
}
根据你的需求，你需要删除其中一个 currentUsername: '' 或 currentUsername: 'WhatIsYournameScreen' 行。
第二警告
> ./src/components/ChatScreen.jsx 第35行:5: 不可到达的代码 no-unreachable
在你的 render 方法中有两个 return 语句。你需要删除第一个。
import React, { Component } from 'react'
import Chatkit from '@pusher/chatkit-client'
class ChatScreen extends Component{
constructor(props) {
super(props)
this.state = {
currentUser: {}
}
}
componentDidMount() {
const chatManager = new Chatkit.ChatManager({
instanceLocator: 'v1:us1:1308c34d-00c3-4257-b1c3-647cf56fd5fa',
userId: this.props.currentUsername,
tokenProvider: new Chatkit.TokenProvider({
url: 'http://localhost:3000/authenticate',
}),
})
chatManager
.connect()
.then(currentUser => {
this.setState({ currentUser })
})
.catch(error => console.error('error', error))
}
render() {
return (
<div style={styles.container}>
<div style={styles.chatContainer}>
<aside style={styles.whosOnlineListContainer}>
<h2>Who's online PLACEHOLDER</h2>
</aside>
<section style={styles.chatListContainer}>
<h2>Chat PLACEHOLDER</h2>
</section>
</div>
</div>
);
}
}
const styles = {
container: {
height: '100vh',
display: 'flex',
flexDirection: 'column',
},
chatContainer: {
display: 'flex',
flex: 1,
},
whosOnlineListContainer: {
width: '300px',
flex: 'none',
padding: 20,
backgroundColor: '#2c303b',
color: 'white',
},
chatListContainer: {
padding: 20,
width: '85%',
display: 'flex',
flexDirection: 'column',
},
}
export default ChatScreen;
英文:
First warning
> ./src/App.js Line 10:7: Duplicate key 'currentUsername' no-dupe-keys
You have a duplicate key in your state declaration
constructor() {
super();
this.state = {
currentUsername: '',
currentUsername: 'WhatIsYournameScreen',
}
this.onUsernameSubmitted = this.onUsernameSubmitted.bind(this)
}
You need to remove either currentUsername: '' or currentUsername: 'WhatIsYournameScreen' line according to your needs.
Second warning
> ./src/components/ChatScreen.jsx Line 35:5: Unreachable code no-unreachable
You have two return statements inside your render method. You need to delete the first one.
import React, { Component } from 'react'
import Chatkit from '@pusher/chatkit-client'
class ChatScreen extends Component{
constructor(props) {
super(props)
this.state = {
currentUser: {}
}
}
componentDidMount() {
const chatManager = new Chatkit.ChatManager({
instanceLocator: 'v1:us1:1308c34d-00c3-4257-b1c3-647cf56fd5fa',
userId: this.props.currentUsername,
tokenProvider: new Chatkit.TokenProvider({
url: 'http://localhost:3000/authenticate',
}),
})
chatManager
.connect()
.then(currentUser => {
this.setState({ currentUser })
})
.catch(error => console.error('error', error))
}
render() {
return (
<div style={styles.container}>
<div style={styles.chatContainer}>
<aside style={styles.whosOnlineListContainer}>
<h2>Who's online PLACEHOLDER</h2>
</aside>
<section style={styles.chatListContainer}>
<h2>Chat PLACEHOLDER</h2>
</section>
</div>
</div>
);
}
}
const styles = {
container: {
height: '100vh',
display: 'flex',
flexDirection: 'column',
},
chatContainer: {
display: 'flex',
flex: 1,
},
whosOnlineListContainer: {
width: '300px',
flex: 'none',
padding: 20,
backgroundColor: '#2c303b',
color: 'white',
},
chatListContainer: {
padding: 20,
width: '85%',
display: 'flex',
flexDirection: 'column',
},
}
export default ChatScreen;
答案3
得分: 0
`ChatScreen.jsx`:
```jsx
import React, { Component } from 'react'
import Chatkit from '@pusher/chatkit-client'
class ChatScreen extends Component {
constructor(props) {
super(props)
this.state = {
currentUser: {}
}
}
componentDidMount() {
const chatManager = new Chatkit.ChatManager({
instanceLocator: 'v1:us1:1308c34d-00c3-4257-b1c3-647cf56fd5fa',
userId: this.props.currentUsername,
tokenProvider: new Chatkit.TokenProvider({
url: 'http://localhost:3000/authenticate',
}),
})
chatManager
.connect()
.then(currentUser => {
this.setState({ currentUser })
})
.catch(error => console.error('error', error))
}
render() {
const styles = {
container: {
height: '100vh',
display: 'flex',
flexDirection: 'column',
},
chatContainer: {
display: 'flex',
flex: 1,
},
whosOnlineListContainer: {
width: '300px',
flex: 'none',
padding: 20,
backgroundColor: '#2c303b',
color: 'white',
},
chatListContainer: {
padding: 20,
width: '85%',
display: 'flex',
flexDirection: 'column',
},
}
return (
<div style={styles.container}>
<div style={styles.chatContainer}>
<aside style={styles.whosOnlineListContainer}>
<h2>Who's online PLACEHOLDER</h2>
</aside>
<section style={styles.chatListContainer}>
<h2>Chat PLACEHOLDER</h2>
</section>
</div>
</div>
);
}
}
export default ChatScreen;
App.js:
import React, { Component } from 'react'
import UsernameForm from './components/UsernameForm'
import ChatScreen from './components/ChatScreen'
class App extends Component {
constructor() {
super();
this.state = {
currentUsername: '',
currentScreen: 'WhatIsYournameScreen',
}
this.onUsernameSubmitted = this.onUsernameSubmitted.bind(this)
}
onUsernameSubmitted(username) {
fetch('http://localhost:3000/users', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({ username }),
})
.then(response => {
this.setState({
currentUsername: username,
currentScreen: 'ChatScreen'
})
})
.catch(error => console.error('error', error))
}
render() {
if (this.state.currentScreen === 'WhatIsYourUsernameScreen') {
return <UsernameForm onSubmit={this.onUsernameSubmitted} />
}
if (this.state.currentScreen === 'ChatScreen') {
return <ChatScreen currentUsername={this.state.currentUsername} />
}
return (
<div>
<h1>Hoş geldin</h1>
<UsernameForm onSubmit={this.onUsernameSubmitted} />
</div>
);
}
}
export default App;
英文:
ChatScreen.jsx:
import React, { Component } from 'react'
import Chatkit from '@pusher/chatkit-client'
class ChatScreen extends Component{
constructor(props) {
super(props)
this.state = {
currentUser: {}
}
}
componentDidMount() {
const chatManager = new Chatkit.ChatManager({
instanceLocator: 'v1:us1:1308c34d-00c3-4257-b1c3-647cf56fd5fa',
userId: this.props.currentUsername,
tokenProvider: new Chatkit.TokenProvider({
url: 'http://localhost:3000/authenticate',
}),
})
chatManager
.connect()
.then(currentUser => {
this.setState({ currentUser })
})
.catch(error => console.error('error', error))
}
render() {
const styles = {
container: {
height: '100vh',
display: 'flex',
flexDirection: 'column',
},
chatContainer: {
display: 'flex',
flex: 1,
},
whosOnlineListContainer: {
width: '300px',
flex: 'none',
padding: 20,
backgroundColor: '#2c303b',
color: 'white',
},
chatListContainer: {
padding: 20,
width: '85%',
display: 'flex',
flexDirection: 'column',
},
}
return (
<div style={styles.container}>
<div style={styles.chatContainer}>
<aside style={styles.whosOnlineListContainer}>
<h2>Who's online PLACEHOLDER</h2>
</aside>
<section style={styles.chatListContainer}>
<h2>Chat PLACEHOLDER</h2>
</section>
</div>
</div>
);
}
}
export default ChatScreen;
App.js:
import React, { Component } from 'react'
import UsernameForm from './components/UsernameForm'
import ChatScreen from './components/ChatScreen'
class App extends Component {
constructor() {
super();
this.state = {
currentUsername: '',
currentScreen: 'WhatIsYournameScreen',
}
this.onUsernameSubmitted = this.onUsernameSubmitted.bind(this)
}
onUsernameSubmitted(username) {
fetch('http://localhost:3000/users', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({ username }),
})
.then(response => {
this.setState({
currentUsername: username,
currentScreen: 'ChatScreen'
})
})
.catch(error => console.error('error', error))
}
render() {
if (this.state.currentScreen === 'WhatIsYourUsernameScreen') {
return <UsernameForm onSubmit={this.onUsernameSubmitted} />
}
if (this.state.currentScreen === 'ChatScreen') {
return <ChatScreen currentUsername={this.state.currentUsername} />
}
return (
<div>
<h1>Hoş geldin</h1>
<UsernameForm onSubmit={this.onUsernameSubmitted} />
</div>
);
}
}
export default App;
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论