Javascript React.js重复密钥和无法访问的代码错误_Javascript_Reactjs_Ecmascript 6

Javascript React.js重复密钥和无法访问的代码错误

javascript reactjs ecmascript-6

Javascript React.js重复密钥和无法访问的代码错误,javascript,reactjs,ecmascript-6,Javascript,Reactjs,Ecmascript 6,嗨，我正在学习React.js，现在正在制作聊天应用程序。这是我的错误和代码。 ./src/App.js第10:7行：重复键“currentUsername” 没有重复的钥匙 ./src/components/ChatScreen.jsx第35:5行：无法访问的代码没有遥不可及的搜索关键字以了解有关每个警告的更多信息。若要忽略，将//eslint disable next行添加到前面的行 import React，{Component}来自“React” 从“@pusher/Chatki

嗨，我正在学习React.js，现在正在制作聊天应用程序。这是我的错误和代码。

./src/App.js第10:7行：重复键“currentUsername” 没有重复的钥匙

./src/components/ChatScreen.jsx第35:5行：无法访问的代码没有遥不可及的

搜索关键字以了解有关每个警告的更多信息。若要忽略，将//eslint disable next行添加到前面的行

import React，{Component}来自“React”
从“@pusher/Chatkit-client”导入聊天包
类ChatScreen扩展组件{
建造师（道具）{
超级（道具）
此.state={
当前用户：{}
}
}
componentDidMount（）{
const chatManager=新建Chatkit.chatManager({
instanceLocator:'v1:us1:1308c34d-00c3-4257-b1c3-647cf56fd5fa'，
userId:this.props.currentUsername，
tokenProvider:new Chatkit.tokenProvider({
网址：'http://localhost:3000/authenticate',
}),
})
聊天经理
.connect（）
。然后（currentUser=>{
this.setState（{currentUser}）
})
.catch（error=>console.error（'error'，error））
}
render（）{
返回(
)
常量样式={
容器：{
高度：“100vh”，
显示：“flex”，
flexDirection:'列'，
},
聊天室：{
显示：“flex”，
弹性：1，
},
whosOnlineListContainer：{
宽度：“300px”，
flex:'无'，
填充：20，
背景颜色：“#2c303b”，
颜色：'白色'，
},
chatListContainer：{
填充：20，
宽度：“85%”，
显示：“flex”，
flexDirection:'列'，
},
}
返回(
谁是在线占位符
聊天占位符
);
}
}
导出默认聊天屏幕；

你能帮我吗

./src/components/ChatScreen.jsx第35:5行：不可访问代码不可访问

此lint错误警告您在render方法的顶部有一个return语句，后面是永远不会执行的代码。即，此代码使函数的其余部分无效：

return (
  <div>

  </div>
)

或者正在尝试创建具有相同问题的组件：

<ChatScreen
  currentUsername="bob"
  currentUsername="alice"
/>

第一次警告 ./src/App.js第10:7行：重复键“currentUsername”无重复键

您的州声明中有重复的密钥

constructor() {
    super();
    this.state = {
      currentUsername: '', 
      currentUsername: 'WhatIsYournameScreen',
    }
    this.onUsernameSubmitted = this.onUsernameSubmitted.bind(this)
  }

您需要根据需要删除

currentUsername:“

或

currentUsername:“WhatIsYournameScreen”

行

第二次警告 ./src/components/ChatScreen.jsx第35:5行：不可访问代码不可访问

在

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;

import React，{Component}来自“React”
从“@pusher/Chatkit-client”导入聊天包
类ChatScreen扩展组件{
建造师（道具）{
超级（道具）
此.state={
当前用户：{}
}
}
componentDidMount（）{
const chatManager=新建Chatkit.chatManager({
instanceLocator:'v1:us1:1308c34d-00c3-4257-b1c3-647cf56fd5fa'，
userId:this.props.currentUsername，
tokenProvider:new Chatkit.tokenProvider({
网址：'http://localhost:3000/authenticate',
}),
})
聊天经理
.connect（）
。然后（currentUser=>{
this.setState（{currentUser}）
})
.catch（error=>console.error（'error'，error））
}
render（）{
返回(
谁是在线占位符
聊天占位符
);
}
}
常量样式={
容器：{
高度：“100vh”，
显示：“flex”，
flexDirection:'列'，
},
聊天室：{
显示：“flex”，
弹性：1，
},
whosOnlineListContainer：{
宽度：“300px”，
flex:'无'，
填充：20，
背景颜色：“#2c303b”，
颜色：'白色'，
},
chatListContainer：{
填充：20，
宽度：“85%”，
显示：“flex”，
flexDirection:'列'，
},
}
导出默认聊天屏幕；

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;

对于第二个警告，这是因为在

render

方法中有两条

return

语句。删除第一个。您还应该将

常量样式

放在组件外部。对于第一个警告，请提供

App.js

file code.ok我确实删除了return（），但我使用了tgis err./src/App.js第10:7行：重复键'currentUsername'无重复键你可以找到我的App.js到底部我修复了所有错误，但我没有看到我的css代码。我刚刚看到htmlI发送的，你可以看到下面你没有错误吗？因为正如我所看到的，你的代码没有问题。我确实运行了你的代码，css按预期工作什么！？怎么用？这是我的屏幕，你可以看到试试这个

this.state={currentUsername:''，currentScreen:'ChatScreen'，}

请添加解释。只有代码的答案才有资格删除。

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;

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;

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;