React defaultValue不工作axios传递dynamic数据
你好即时新在React和即时通讯尝试玩一点与反应，但inheritance人一点我不明白。
首先，获取axios数据谁返回我的数据，下面，然后我尝试把它们放入input字段，值（和只读），defaultValue更好，现在我有问题，我什么都看不到，值存在当我用萤火虫查看时，奇怪的是，当我添加一个不需要的字符input得到我想要的填充，但不是默认情况下。
非常奇怪的是，当我把所有东西放在一个数组中，并且在它上面执行一个映射函数时，我有这个值
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'));
您需要等到数据显示正在加载。
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'));
最初，您的数据状态是数组格式。 所以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'));
“代码风格”已经过时了。 尝试使用绑定你的函数的箭头函数，比如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
感谢所有，特别是提示和技巧，我怎么能做得更好，我的问题解决了，非常感谢所有帮助我在15分钟快乐
即时通讯现在也find了玩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} />