this.setState({})String包含无效字符

时间:2018-06-18 07:54:12

标签: javascript reactjs

我有这段代码:

Imports System
Imports System.IO

Public Class Form1
    Public gpath As String = "D:\kvt.txt"
    Public Sub New()
        ' This call is required by the designer.
        InitializeComponent()
    End Sub

    Private Sub Form1_Load(sender As Object, e As EventArgs) Handles MyBase.Load
        Dim file = System.IO.File.ReadAllLines("d:\kvt.txt")
        Dim dt As New DataTable
        dt.Columns.Add("Name")
        For Each line As String In file
            dt.Rows.Add(line)
        Next
        DataGridView1.DataSource = dt
        DataGridView1.Show()
    End Sub

    Private Sub dataGridView1_MouseClick(ByVal sender As DataGridView, ByVal e As MouseEventArgs) Handles DataGridView1.MouseClick
        Dim cMenu As New ContextMenuStrip
        Dim MenuItemClone As New System.Windows.Forms.ToolStripMenuItem
        MenuItemClone.Text = "Clone"
        cMenu.Items.Add(MenuItemClone)
        If e.Button = MouseButtons.Right Then
            Dim currentMouseOverRow As Integer = DataGridView1.HitTest(e.X, e.Y).RowIndex
            cMenu.Show(DataGridView1, New Point(e.X, e.Y))
            AddHandler MenuItemClone.Click, AddressOf CloneRepo
        End If
    End Sub

    Private Sub CloneRepo(ByVal sender As Object, ByVal e As System.EventArgs)
        Dim SelectedName As String = DataGridView1("Name", DataGridView1.CurrentCell.RowIndex).FormattedValue
    End Sub
End Class

这一部分:

export default class AssignmentComponent extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            questions: [],
            questionId: this.props.questionId,
            pictures: [],
        };
        this.handleTextSubmit = this.handleTextSubmit.bind(this);
        this.assignUserToAssignment = this.assignUserToAssignment.bind(this);
        this.handleImageSubmit = this.handleImageSubmit.bind(this);
        this.onImageDrop = this.onImageDrop.bind(this);
        this.handleImageSubmit = this.handleImageSubmit.bind(this);
    }

    async componentDidMount() {
        const questionsRef = firebase.database().ref('Works').orderByChild('firebaseKey').equalTo(this.props.questionId);
        await questionsRef.on('value', snapshot => {
            let questions = snapshot.val();
            let newState = [];
            for (let question in questions) {
                newState.push({
                    id: question,
                    category: questions[question].category,
                    level: questions[question].level,
                    pointAmount: questions[question].pointAmount,
                    pointBoost: questions[question].pointBoost,
                    photoURL: questions[question].photoURL,
                    workText: questions[question].workText,
                });
            }
            try {
                this.setState({
                    questions: newState
                });
            } catch (e) {
                console.log('assignment', e)
            }
        });
        await this.assignUserToAssignment();
    }


    async assignUserToAssignment() {
        var currentUser = firebase.auth().currentUser;
        var currentAssignment = firebase.database().ref('Works').child(this.props.questionId);

        await currentAssignment.child('available').set(false).catch(e => console.log(e));
        await currentAssignment.child('state').set('Taken').catch(e => console.log(e));
        await currentAssignment.child('solverID').set(currentUser.uid).catch(e => console.log(e));
        await firebase.database().ref('Users').child(currentUser.uid).child('assignedWork').set(this.props.questionId).catch(e => console.log(e));
    }


    async handleTextSubmit(e) {
        e.preventDefault();
        var textAnswer = document.getElementById('textAnswer').value;
        var currentAssignment = firebase.database().ref('Works').child(this.props.questionId);
        if (textAnswer.length > 0) {
            let pushRef = currentAssignment.child('answers').push();
            pushRef.set({
                textAnswer: textAnswer,
                date: Time.generate(),
                seen: false,
                firebaseKey: pushRef.getKey(),
                workKey: this.props.questionId
            }).catch(e => console.log('push->set', e))
        }
    }

    async onImageDrop(files) {
        await this.setState({
            uploadedFile: files[0]
        });

        this.handleImageSubmit(files[0]);
    }

    async handleImageSubmit(file) {
        // Create the file metadata
        var metadata = {
            contentType: 'image/jpeg'
        };
        var uploadTask = firebase.storage().ref().child('images/' + Uuid.generate()).put(file, metadata);
        var outerThis = this;
        uploadTask.on(firebase.storage.TaskEvent.STATE_CHANGED,
            function (snapshot) {
                var progress = (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
                console.log('Upload is ' + progress + '% done');
                switch (snapshot.state) {
                    case firebase.storage.TaskState.PAUSED: // or 'paused'
                        console.log('Upload is paused');
                        break;
                    case firebase.storage.TaskState.RUNNING: // or 'running'
                        console.log('Upload is running');
                        break;
                    default:
                        console.log('test1');
                        break;
                }
            }, function (error) {
                // A full list of error codes is available at
                // https://firebase.google.com/docs/storage/web/handle-errors
                switch (error.code) {
                    case 'storage/unauthorized':
                        // User doesn't have permission to access the object
                        break;

                    case 'storage/canceled':
                        // User canceled the upload
                        break;

                    case 'storage/unknown':
                        // Unknown error occurred, inspect error.serverResponse
                        break;

                    default:
                        console.log('test2');
                        break;
                }
            }, function () {
                uploadTask.snapshot.ref.getDownloadURL().then(function (downloadURL) {
                    console.log('File available at', downloadURL);
                    var currentAssignment = firebase.database().ref('Works').child(outerThis.props.questionId);
                    let pushRef = currentAssignment.child('answers').push();
                    try {
                        pushRef.set({
                            downloadURL: downloadURL,
                            date: Time.generate(),
                            seen: false,
                            firebaseKey: pushRef.getKey(),
                            workKey: outerThis.props.questionId
                        }).catch(e => console.log('push->set', e));
                        outerThis.state.setState({
                            pictures: outerThis.state.pictures.concat(downloadURL),
                        })
                    } catch (e) {
                        console.log('tutej', e)
                    }
                });
            });
    }

    render() {
        return (
            this.state.questions.map(question => {
                return (
                    <section key={question.id} className='display-question'>
                        <div className='wrapper show-grid'>
                            <h3>Kategoria: {question.category}</h3>
                            <p>Poziom: {question.level}</p>
                            <p>Punkty: {question.pointAmount + question.pointBoost}</p>
                            <Col xs={12} md={6}>
                                <img alt='' style={{width: '100%'}}
                                     src={question.photoURL}/>{/*Need 100% for the ratio*/}
                                <p>{question.workText}</p>
                            </Col>
                            <Col xs={12} md={6}>
                                <form encType="multipart/form-data" onSubmit={this.handleTextSubmit}>
                                    <textarea name="textAnswer" id="textAnswer" style={{
                                        width: '100%',
                                        height: '50vh',
                                        background: 'white',
                                        color: 'black',
                                    }}/>
                                    <Button type='submit' style={{display: 'block'}}>Wyslij odpowiedz tekstowa</Button>
                                    <Dropzone
                                        multiple={false}
                                        accept="image/*"
                                        onDrop={this.onImageDrop.bind(this)}>
                                        <p>Wyslij zdjecie w odpowiedzi</p>
                                    </Dropzone>

                                    <CancelAnswerButton questionId={question.id}/>

                                    <FinishAnswerButton questionId={question.id}/>
                                </form>
                            </Col>
                        </div>
                    </section>
                )
            })
        )
    }
}

抛出错误说:this.setState({ questions: newState }); ,我不明白,因为语法似乎是为了我。

在我拿出这两个要素后,我开始向南走了:

InvalidCharacterError: String contains an invalid character

CancelAnswerButton

export default class CancelAnswerButton extends React.Component { constructor(props) { super(props); } async handleCanceling(e) { try { e.preventDefault(); var currentAssignment = firebase.database().ref('Works').child(this.props.questionId); var currentUser = firebase.auth().currentUser; await currentAssignment.child('available').set(true).catch(e => console.log(e)); await currentAssignment.child('state').set('Waiting').catch(e => console.log(e)); await currentAssignment.child('solverID').remove().catch(e => console.log(e)); await firebase.database().ref('Users').child(currentUser.uid).child('assignedWork').remove().catch(e => console.log(e)); return <AssignmentsComponent/> // TODO Delete reputation points } catch (e) { console.log('handle', e) } } render() { try { return ( <Button onClick={this.handleCanceling} style={{display: 'block'}}>Anuluj rozwiazywanie zadan (Odejmujemy za to pkt z rangi koleszko)</Button> ) } catch (e) { console.log('render', e) } } }

FinishAnswerButton

但他们看起来都很好。那我错过了什么?

我试图使代码更加模块化,并且仍在学习React,所以可能存在很多问题。

问题对象的示例:

export default class FinishAnswerButton extends React.Component {
    constructor(props) {
        super(props);
    }

    async handleFinishAssignment() {
        var currentUser = firebase.auth().currentUser;
        await firebase.database().ref('Users').child(currentUser.uid).child('assignedWork').remove().catch(e => console.log(e));
        var currentAssignment = firebase.database().ref('Works').child(this.props.questionId);
        await currentAssignment.child('state').set('Completed').catch(e => console.log(e));
        await currentAssignment.child('finishTime').set(Time.generate()).catch(e => console.log('finishTime', e));
        return <AssignmentsComponent/>
    }

    render() {
        return (
            <Button onClick={this.handleFinishAssignment}>Zakoncz rozwiazywanie zadania (Upewnij
                sie ze uczen ma wszystko czego potrzebuje!)</Button>
        )
    }
}

1 个答案:

答案 0 :(得分:0)

杀死并重新启动yarn start进程解决了问题。不知道为什么。如果有人知道或有想法,请随时留下答复/评论