反應變量在jsx中變化

Question

下午好！

我一直在跟隨教程玩過，並遇到了一個我似乎無法理解的問題。

每當我傳遞變量通過this.props.updateSurveyText(this.props.index, newText)他們改回舊的變量，當他們進入updateSurveyText={this.updateSurvey.bind(i, newText[0], newText[1])}

記錄顯示在第一功能正確的變量，但是當我在第二個功能記錄他們，他們是不變的。

非常感謝幫助！

調查：

import React from 'react'; 
import ReactDOM from 'react-dom'; 

export default class Survey extends React.Component{ 
    constructor(props){ 
    super(props); 
    this.state = { 
     editing : false, 
     title : "", 
     desc : "", 
    }; 
    this.edit = this.edit.bind(this); 
    this.save = this.save.bind(this); 
    this.remove = this.remove.bind(this); 
    } 

    edit() { 
    this.setState({editing: true}); 
    } 

    remove() { 
    console.log('delete'); 
    this.props.deleteFromBoard(this.props.index) 
    } 

    save() { 
    var title = this.refs.newTitle.value; 
    var desc = this.refs.newDesc.value; 
    var newText = [title, desc]; 
    console.log(newText[0]); 
    this.props.updateSurveyText(this.props.index, newText); 
    this.setState({editing: false}); 
    } 

    renderNormal(){ 
    return(
     <div className="surveyContainer"> 
     <div className="surveyTitle">{this.props.children[0]}</div> 
     <div className="surveyDesc">{this.props.children[1]}</div> 
     <button onClick={this.edit} className="button-primary">Edit</button> 
     <button onClick={this.remove} className="button-primary">Remove</button> 
     </div> 
    ); 
    } 

    renderForm(){ 
    return(
     <div className="surveyContainer"> 
     <textarea ref="newTitle" defaultValue={this.props.children[0]}></textarea> 
     <textarea ref="newDesc" defaultValue={this.props.children[1]}></textarea> 
     <button onClick={this.save} className="button-primary">Save</button> 
     </div> 
    ); 
    } 

    render(){ 
     if(this.state.editing){ 
     return this.renderForm(); 
     }else{ 
     return this.renderNormal(); 
     } 
    } 
} 

局：

import Survey from './Survey.jsx'; 
import React from 'react'; 
import ReactDOM from 'react-dom'; 

export default class Board extends React.Component{ 
    constructor(props){ 
    super(props); 
    this.state = { 
     surveys: [ 

     ], 
    }; 
    this.updateSurvey = this.updateSurvey.bind(this); 
    this.removeSurvey = this.removeSurvey.bind(this); 
    this.eachSurvey = this.eachSurvey.bind(this); 
    this.addSurvey = this.addSurvey.bind(this); 
    } 

    addSurvey(title, desc){ 
    var arr = this.state.surveys; 
    arr.push([title, desc]); 
    this.setState({surveys: arr}) 
    } 

    removeSurvey(i){ 
    var arr = this.state.surveys; 
    arr.splice(i, 1); 
    this.setState({surveys: arr}) 
    } 

    updateSurvey(newTitle, newDesc, i){ 
    console.log(newTitle);console.log(newDesc); 
    var arra = this.state.surveys; 
    arra[i] = [newTitle, newDesc]; 
    this.setState({surveys: arra}); 

    } 

    eachSurvey(newText, i){ 
    return(
     <Survey key={i} index={i} updateSurveyText={this.updateSurvey.bind(i, newText[0], newText[1])} deleteFromBoard={this.removeSurvey.bind(i)}> 
     {newText[0]} 
     {newText[1]} 

     </Survey>); 
    } 

    render(){ 
    return(
     <div> 
     <button onClick={this.addSurvey.bind(null, "Titel", "Desc")}>Add new</button> 
     <div className="board"> 
      {this.state.surveys.map(this.eachSurvey)} 
     </div> 
     </div> 
    ) 
    } 
} 

Answer 1

你updateSurvey函數接受三個參數。

updateSurvey(newTitle, newDesc, i)

當你調用.bind上的功能，您所提供的「參數時，預先準備調用目標函數時提供給綁定函數的參數。」 Function.prototype.bind

這意味着，當你調用

updateSurveyText={this.updateSurvey.bind(i, newText[0], newText[1])}

流傳下來作爲updateSurveyText功能具有永久預先考慮到它的參數列表兩個參數時，它被調用。無論調用.bind時newText[0]和newText[1]的值是否將被用作每當調用updateSurveyText時的第一個和第二個參數。

這裏有一個例子：

function add(first, second) { 
 
    console.log('add called with args: ', first, second); 
 
    console.log('all arguments: ', [].slice.call(arguments)); 
 
    return first + second; 
 
} 
 

 
document.write('add(1, 1) = ' + add(1, 1)); 
 
document.write('<br>'); 
 

 
var boundAdd = add.bind(null, 1, 1); 
 

 
// despite passing new arguments, 2 and 2, the 
 
// bound function has 1 and 1 bound to it and will not 
 
// use 2 and 2 as the first and second arg. 
 
// 1 and 1 are prepended to the arguments list. 
 
document.write('boundAdd(2, 2) = ' + boundAdd(2, 2));