Question

我一直试图让我的动态表单在我的Meteor React应用程序中运行。

在我开始添加之前，这一切都按照要求工作但现在我无法让它工作。我得到一个“未捕获的TypeError：无法设置属性'0'未定义”错误。这指向了这一行：

{this.state.inputs.map((input, idx) => <input

这是我的整个代码，我知道它有点乱，所以任何反馈都受到高度赞赏：

import React, { Component } from 'react';
import { Row, Col, Checkbox, Radio, ControlLabel, HelpBlock, FormGroup, FormControl, Button, Tabs, Tab } from 'react-bootstrap';
import { Bert } from 'meteor/themeteorchef:bert';
import { insertComment } from '../../../api/comments/methods';
import ReactQuill from 'react-quill'; 

var s3Url = null;

export default class AddSparkShanghai extends Component {
  constructor(props) {
    super(props);

    this.createSpark = this.createSpark.bind(this);
    this.onChange = this.onChange.bind(this);

    this.state ={
      inputs: ['input-0'],
      city: '',
      person: '',
      location: '',
      title: '',
      content: [],
      mediaUrls: [], 
    };
  }

componentWillMount(){
    // we create this rule both on client and server
    Slingshot.fileRestrictions("myFileUploads", {
      allowedFileTypes: ["image/png", "image/jpeg", "image/gif"],
      maxSize: 10 * 1024 * 1024 // 10 MB (use null for unlimited)
    });
  }

  upload(file){
    var uploader = new Slingshot.Upload("myFileUploads");

    uploader.send(document.getElementById('input').files[0], function (error, downloadUrl) {
      if (error) {
        // Log service detailed response
        alert (error);
      }
      else {
        s3Url = encodeURI(downloadUrl);
        Bert.alert('File uploaded!', 'success');
        Meteor.users.update(Meteor.userId(), {$push: {"profile.files": downloadUrl}});
      }
    });
  }

  createSpark(event) {
  event.preventDefault();
  var formData = $('#form').serializeArray()
  console.log(formData);
  var mediaArray = [];
  if (this.mediaUrls.value == 0) {
    mediaArray = [];
  } else {
    mediaArray.push(encodeURI(this.mediaUrls.value));
    console.log(this.mediaUrl.value);
    console.log(mediaArray);
  }

  const city = 'Shanghai';
  const person = this.person.value;
  const location = this.location.value;
  const title = this.title.value;
  const content = this.state.content;
  const fileLink = s3Url;
  const timestamp = parseInt(this.props.timestamp);
  const mediaUrls = mediaArray;
  const approved = true;
  const adminSpark = true;
  const createdBy = Meteor.userId();


  insertComment.call({
    city, person, location, title, content, fileLink, timestamp, approved, adminSpark, createdBy, mediaUrl,
    }, (error) => {
      if (error) {
            Bert.alert(error.reason, 'danger');
        } else {
            
            Bert.alert('Spark added!', 'success');
        }
    });
  }

  onChange(html) {
    this.setState ({ content: html });
  }

  appendInput() {
    var newInput = `input-${this.state.inputs.length}`;
    console.log (newInput);
    this.setState({ inputs: this.state.inputs.concat([newInput]) });
  }


  render() {
     const events = {
      'text-change': delta => {
      }
    }    

    return (
      <div className="background-container">
        <form ref={(input) => this.sparkForm = input} onSubmit={(e) => this.createSpark(e)}>
       
            <ControlLabel>Select your person (optional)</ControlLabel>
            <select id="formControlsPerson" placeholder="Choose your person" className="form-control" ref={(input) => this.person = input}>
              <option value='select'>Select your person</option>
              <option value='jane'>Jane Siesta</option>
              <option value='ben'>Ben Huang</option>
              <option value='han'>Han Han</option>
              <option value='mau'>Mau Mau</option>
              <option value='void'>VOID</option>
              <option value='tommy'>Tommy Hendriks</option>
              <option value='gareth'>Gareth Williams</option>
              <option value='gigi'>Gigi Lee</option>
            </select>
    
            <ControlLabel>Select your location (optional)</ControlLabel>
            <select id="formControlsLocation" placeholder="Choose your location" className="form-control" ref={(input) => this.location = input}>
              <option value='select'>Select your location</option>
              <option value='shelter'>Shelter</option>
              <option value='mansion'>The Mansion</option>
            </select>

            <ControlLabel>Title</ControlLabel>
            <input type="text" label="Title" placeholder="Enter your title" className="form-control" ref={(input) => this.title = input}/>
          
            <ControlLabel>Add Image</ControlLabel>
            <div className="upload-area">
              <p className="alert alert-success text-center">
                <span>Click or Drag an Image Here to Upload</span>
                <input type="file" id="input" className="file_bag" onChange={this.upload} />
              </p>
            </div>

            <ControlLabel>Content</ControlLabel>
              <div className='_quill'>
                <ReactQuill
                  toolbar={false} 
                  theme="snow"
                  ref='editor'
                  onChange={this.onChange}
                  events={events} />
               </div>
              <br />

          <ControlLabel>Media (optional)</ControlLabel>
          <div id="dynamicInput">
            {this.state.inputs.map((input, idx) => <input 
                key={ input } 
                type="text" 
                label="Media" 
                placeholder="Add your media url" 
                className="form-control" 
                ref={(input) => this.mediaUrls[idx] = input}/> )}       
          </div>
          <Button onClick={ () => this.appendInput() }>
            Add media field
          </Button>



       <ControlLabel>Media (optional)</ControlLabel>
          <div id="dynamicInput">
            {this.state.inputs.map(input => <input key={input} type="text" label="Media" placeholder="Add your media url" className="form-control" ref={(input) => this.mediaUrl = input}/> )}
          </div>
          <Button onClick={ () => this.appendInput() }>
            Add media field
          </Button>


           
   
          <Button type="submit" data-dismiss="modal">Submit</Button>
        </form>
      </div>
  )}
}

Answer 1

我想问题就在于这一行：ref={(input) => this.mediaUrls[idx] = input}/> )}，似乎this.mediaUrls的值是undefined

如何让这种动态形式起作用？

1 个答案: