javascript - React.js - 未正确映射属性

Question

我正在构建一个简单的反应应用程序，我希望最终用户能够从选择的单选按钮中单击一个名称，然后在文本框中输入一个数字（吃掉的苹果）。一旦他们提交（猜测），我希望他们的名字显示在吃的苹果数量旁边。我一定不能正确映射（属性？），因为现在我可以看到吃的苹果，但看不到他们选择的名称。

我使用 firebase 作为我的数据库，但我认为这并不重要。

我认为这一行：

<p> By {item.user}

是给我的问题（我有多个用户），但是当我将其更改为

<p> By {item.userHarry} 

或我的任何/所有其他用户，它仍然无法正常工作。我不确定我是否需要 || （或）包含所有名称的 jsx 括号内的操作数？

任何帮助将不胜感激。

我的 index.html 页面非常简单。

这是我的 App.js

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import firebase from './firebase.js';


class App extends Component {
  constructor() {
  super();
  this.state = {

  // username: '',

  usernameHarry: '',
  usernameSteve: '',
  usernameSally: '',
  usernameAmin: '',
  usernameZaney: '',
  usernameIl: '',

  currentItem: '',

  items: []
  }

  this.handleChange = this.handleChange.bind(this);
  this.handleSubmit = this.handleSubmit.bind(this);
  }


 handleChange(e) {
  this.setState({
   [e.target.name]: e.target.value
  });
 }

 handleSubmit(e) {
  e.preventDefault();
  const itemsRef = firebase.database().ref('items');
  const item = {

  // user: this.state.username,

  userHarry: this.state.usernameHarry,
  userSteve: this.state.usernameSteve,
  userSally: this.state.usernameSally,
  userAmin: this.state.usernameAmin,
  userZaney: this.state.usernameZaney,
  userIl: this.state.usernameIl,

  title: this.state.currentItem

  }

  itemsRef.push(item);
  this.setState({

  // username: '',

  usernameHarry: '',
  usernameSteve: '',
  usernameSally: '',
  usernameAmin: '',
  usernameZaney: '',
  usernameIl: '',

  currentItem: ''

  });
 }

componentDidMount() {
  const itemsRef = firebase.database().ref('items');
  itemsRef.on('value', (snapshot) => {
  let items = snapshot.val();
  let newState = [];
  for (let item in items) {
    newState.push({

      id: item,

      // user: items[item].user,

      userHarry: items[item].userHarry,
      userSteve: items[item].userSteve,
      userSally: items[item].userSally,
      userAmin: items[item].userAmin,
      userZaney: items[item].userZaney,
      userIl: items[item].userIl,

      title: items[item].title

    });
  }
  this.setState({
    items: newState
  });
  });
 }

 removeItem(itemId) {
  const itemRef = firebase.database().ref(`/items/${itemId}`);
  itemRef.remove();
  }

render() {
 return (
  <div className='app'>

    <header>
        <div className="wrapper">
          <h1>Lets Play a Game</h1>      
        </div>
    </header>

    <div className='container'>

      <section className='add-item'>
            <form onSubmit={this.handleSubmit}>


              {/*<input type="text" name="username" placeholder="enter name" 
                onChange={this.handleChange} value={this.state.username} />*/}

              <input type="radio" name="usernameHarry" value="Harry" onChange= 
              {this.handleChange} value={this.state.usernameHarry} />
                  <label for="harry">Harry</label>

              <input type="radio" name="usernameSteve" value="Steve" onChange= 
              {this.handleChange} value={this.state.usernameSteve} />
                  <label for="steve">Steve</label>

              <input type="radio" name="usernameSally" value="Sally" onChange= 
              {this.handleChange} value={this.state.usernameSally} />
                  <label for="sally">Sally</label>

              <input type="radio" name="usernameAmin" value="Amin" onChange= 
              {this.handleChange} value={this.state.usernameAmin} />
                  <label for="amin">Amin</label>

              <input type="radio" name="usernameZaney" value="Zaney" onChange= 
              {this.handleChange} value={this.state.usernameZaney} />
                  <label for="zaney">Zaney</label>

              <input type="radio" name="usernameIl" value="Il" onChange= 
            {this.handleChange} value={this.state.usernameIl} />
                  <label for="il">Il</label>


              <label for="quantity">Quantity (between 0 and 1000000000):</label>
              <input type="number" id="quantity" name="currentItem" min="0" 
              max="1000000000" onChange={this.handleChange} value= 
              {this.state.currentItem} />


              <button>Guess</button>

            </form>

      </section>

      <section className='display-item'>
          <div className="wrapper">
            <ul>
              {this.state.items.map((item) => {
                return (
                  <li key={item.id}>
                    <h3>{item.title} Apples eaten</h3>
                    <p>By {item.user }
                      <button onClick={() => 
                      this.removeItem(item.id)}>Remove</button>
                    </p>
                  </li>
                )
              })}
            </ul>
          </div>
      </section>

    </div>

  </div>
  );
 }
 }


export default App;

这是我的 App.css

body {
  font-family: 'Open Sans', sans-serif;
  background-color: #fff;
}

header {
  color: #fff;
  background-color: #103D5D;
  padding: 33px 0 25px 15px;
}

header h1 {
  font-size: 25px;
  font-weight: 600;
  letter-spacing: 0.3px;
  display: inline-block;
  margin: 0;
  vertical-align: middle;
  
}

.fa {
  font-size: 22px;
  transform: translateY(50deg);  
}

header i {
  vertical-align: middle;
  margin-left: 12px;
}

.container {
  display: flex;
  max-width: 1100px;
  margin: 0 auto;
  padding-top: 30px;
}

.wrapper {
  max-width: 1100px;
  margin: 0 auto;
}

.add-item {
  border-radius: 2px;
  border-top: 3px solid #103D5D;
  margin-right: 50px;
  background-color: rgb(237, 237, 237);
  padding: 60px 18px;
  box-shadow: 0 3px 4px 0 rgba(0,0,0,.14), 0 3px 3px -2px rgba(0,0,0,.12), 0 1px 8px 0 rgba(0,0,0,.2);
  margin-bottom: 34px;  
  width: 25%;
  margin-right: auto;
}

.display-item {
  width: 65%;
  margin-left: 50px;
}

.display-item button {
  margin-top: 20px;
  margin-left: auto;
  display: block;
}

.add-item form {
  width: 100%;
  overflow: hidden;
}

input {
  font-size: 22px;
  color: #000;
  padding: 18px 22px;
  font-size: 16px;
  margin-bottom: 17px;
  border: 0;
  display: block;
  width: 100%;  
}

ul {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
}

li {
  width: calc(50% - 50px);
  list-style-type: none;
  margin-right: 50px;
  background-color: rgb(237, 237, 237);
  color: #000;
  margin-bottom: 30px;
  box-shadow: 0 3px 4px 0 rgba(0,0,0,.14), 0 3px 3px -2px rgba(0,0,0,.12), 0 1px 8px 0 rgba(0,0,0,.2);
}

h2 {
  padding: 0;
  margin: 0;
  font-weight: 400;
}

li h3 {
  background-color: #103D5D;
  margin: 0;
  color: #fff;
  font-weight: 300;
  padding: 15px;
}

li p {
  padding: 15px;
}

form button {
  width: 100%;
  margin-top: 10px;
}

button {
  border-radius: 2px;
  min-width: 88px;
  background-color: #FA6900;
  cursor: pointer;
  border: 0;
  min-width: 120px;
  color: #fff;
  font-size: 14px;
  box-shadow: 0 2px 5px 0 rgba(0,0,0,.26);
  padding: 10px 6px;
}

标签： javascriptreactjsfirebasejsx