反應defaultValue不工作axios提供動態數據

Question

你好即時新在React和即時通訊嘗試播放一點與反應，但繼承人一點我不明白。

首先，獲取axios數據誰返回我的數據，下面，然後我嘗試把它們放入輸入字段，值（和只讀），defaultValue更好，現在我有問題，我什麼都看不到，當我用螢火蟲查看時，值是存在的，奇怪的是，當我添加一個不需要的字符時，輸入會被我想要的填充，但不是默認的。

非常奇怪的是，當我在一個陣列放在一切，在它的地圖功能我有值

的JSON代碼

{"firma":"hallo","strasse":"musterweg 7","plz":"01662"} 

的js代碼

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

class Testx extends React.Component { 

    constructor(props) { 
    super(props); 

    this.state = { 
     data:[] 
    }; 
    } 

    componentDidMount(){ 
    var self = this; 

    axios.get('http://localhost/index.php') 
     .then(function (response) { 
     self.setState({ data: response.data}); 
     }) 
     .catch(function (error) { 
     console.log(error); 
     }); 
    } 

    render() { 
    return (
     <div> 
     <input type="text" defaultValue={this.state.data.firma}/> 
     </div> 
    ); 
    } 
} 

ReactDOM.render(<Testx/>, document.getElementById('hello')); 

Answer 1

您需要等到數據顯示加載的內容時才顯示。

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import axios from 'axios'; 
class Testx extends React.Component { 

    constructor(props) { 
    super(props); 

    this.state = { 
    data:{} 
    }; 
} 
componentDidMount(){ 
    var self = this; 
     axios.get('http://localhost/index.php') 
    .then(function (response) { 
    self.setState({ data: response.data}); 
    }) 
    .catch(function (error) { 
    console.log(error); 
    }); 

} 
    render() { 
    const { data }= this.state; 
    if(data.firma) { 
    return (<div> 
       <input type="text" defaultValue={data.firma}/> 
     </div>); 
    } 
    return <div>loading...</div>; 
    } 
} 

ReactDOM.render(<Testx/>, document.getElementById('hello')); 

Answer 2

最初，您的數據狀態是數組格式。所以this.state.data.firma不起作用。而應將其作爲空對象{}。

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import axios from 'axios'; 
class Testx extends React.Component { 

constructor(props) { 
    super(props); 

    this.state = { 
    data: {} 
    }; 
} 

componentDidMount() { 
    var self = this; 
     axios.get('http://localhost/index.php') 
    .then(function (response) { 
    self.setState({ data: response.data}); 
    }) 
    .catch(function (error) { 
    console.log(error); 
    }); 
} 

render() { 
    return <div> 
       <input type="text" defaultValue={this.state.data.firma}/> 
     </div> 
    } 
} 

ReactDOM.render(<Testx/>, document.getElementById('hello')); 

Answer 3

「代碼風格」已過時。嘗試使用綁定你的函數的箭頭函數，如setState。或者在你的構造函數中綁定你的函數，如this.myFunction = myFunction.bind(this)，這樣你就可以訪問this。我已經評論說this.state.data被聲明爲一個數組。請將其更改爲對象或通過特定索引訪問對象。

class Testx extends React.Component { 

    constructor(props) { 
    super(props); 

    this.state = { 
     data:{} 
    }; 
    } 

    componentDidMount =() => { //Note the arrow function to bind this function 
    //Functions like componentDidMount are usually already bound 

    axios.get('http://localhost/index.php') 
     .then((response) => { 
     this.setState({ data: response.data}); 
     }) 
     .catch((error) => { 
     console.log(error); 
     }); 
    } 

    render() { 
    return (
     <div> 
     <input type="text" defaultValue={this.state.data.firma}/> 
     </div> 
    ); 
    } 
} 

如果你的反應是一個數組，而不是一個對象，然後嘗試訪問firma這樣的：this.state.data[index].firma

Answer 4

感謝所有，特殊的技巧和竅門，以及如何我可以做的認爲比較好，我的問題是解決了，非常感謝所有幫助我在15分鐘快樂

IM，現在也找到了一種與https://facebook.github.io/react/docs/forms.html玩，並設置我的狀態

handleChange(event) { 

     var tmp = this.state.data; 
     tmp[event.target.id] = event.target.value 
     this.setState({data: tmp}); 
    } 

與改裝我的渲染

<input type="text" id="firma" value={this.state.data.firma} onChange={this.handleChange} />