Javascript 反应默认值不工作axios交付动态数据_Javascript_Node.js_Reactjs_Axios

Javascript 反应默认值不工作axios交付动态数据

javascript node.js reactjs

Javascript 反应默认值不工作axios交付动态数据,javascript,node.js,reactjs,axios,Javascript,Node.js,Reactjs,Axios,你好，我是React的新手，我试着玩React，但有一点我不明白首先，使用axios数据获取数据，返回我的数据，如下所示，然后我尝试将它们放入输入字段，值（并且是只读的），defaultValue更好，现在我遇到了问题，我什么也看不到，当我使用firebug查看时，值存在，奇怪的是，当我添加一个不需要的字符时，输入由我想要的字符填充，但不是默认情况非常奇怪的是，当我把所有的东西都放在一个数组中，并在上面做一个映射函数时，我得到了这个值 json代码 {"firma":"hallo","st

你好，我是React的新手，我试着玩React，但有一点我不明白

首先，使用axios数据获取数据，返回我的数据，如下所示，然后我尝试将它们放入输入字段，值（并且是只读的），defaultValue更好，现在我遇到了问题，我什么也看不到，当我使用firebug查看时，值存在，奇怪的是，当我添加一个不需要的字符时，输入由我想要的字符填充，但不是默认情况

非常奇怪的是，当我把所有的东西都放在一个数组中，并在上面做一个映射函数时，我得到了这个值

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'));

从“React”导入React；
从“react dom”导入react dom；
从“axios”导入axios；
类Testx扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
数据：[]
};
}
componentDidMount（）{
var self=这个；
axios.get（）http://localhost/index.php')
.然后（功能（响应）{
self.setState（{data:response.data}）；
})
.catch（函数（错误）{
console.log（错误）；
});
}
render（）{
返回(
);
}
}
ReactDOM.render（，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'));

从“React”导入React；
从“react dom”导入react dom；
从“axios”导入axios；
类Testx扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
数据：{}
};
}
componentDidMount（）{
var self=这个；
axios.get（）http://localhost/index.php')
.然后（功能（响应）{
self.setState（{data:response.data}）；
})
.catch（函数（错误）{
console.log（错误）；
});
}
render（）{
const{data}=this.state；
if（data.firma）{
返回(
);
}
返回装载。。。；
}
}
ReactDOM.render（，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'));

从“React”导入React；
从“react dom”导入react dom；
从“axios”导入axios；
类Testx扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
数据：{}
};
}
componentDidMount（）{
var self=这个；
axios.get（）http://localhost/index.php')
.然后（功能（响应）{
self.setState（{data:response.data}）；
})
.catch（函数（错误）{
console.log（错误）；
});
}
render（）{
const{data}=this.state；
if（data.firma）{
返回(
);
}
返回装载。。。；
}
}
ReactDOM.render（，document.getElementById（'hello'））；

最初，数据状态为数组格式。所以

这个.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'));

从“React”导入React；
从“react dom”导入react dom；
从“axios”导入axios；
类Testx扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
数据：{}
};
}
componentDidMount（）{
var self=这个；
axios.get（）http://localhost/index.php')
.然后（功能（响应）{
self.setState（{data:response.data}）；
})
.catch（函数（错误）{
console.log（错误）；
});
}
render（）{
返回
}
}
ReactDOM.render（，document.getElementById（'hello'））；
最初，数据状态为数组格式。所以这个.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'));

从“React”导入React；
从“react dom”导入react dom；
从“axios”导入axios；
类Testx扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
数据：{}
};
}
componentDidMount（）{
var self=这个；
axios.get（）http://localhost/index.php')
.然后（功能（响应）{
self.setState（{data:response.data}）；
})
.catch（函数（错误）{
console.log（错误）；
});
}
render（）{
返回
}
}
ReactDOM.render（，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>
    );
  }
}

类Testx扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
数据：{}
};
}
componentDidMount=（）=>{//注意用于绑定此函数的箭头函数
//像componentDidMount这样的函数通常已经绑定
axios.get（）http://localhost/index.php')
。然后（（响应）=>{
this.setState（{data:response.data}）；
})
.catch（（错误）=>{
console.log（错误）；
});
}
render（）{
返回(
);
}
}

如果您的响应是一个数组而不是一个对象，请尝试访问firma
，如下所示：this.state.data[index].firma
该“代码样式”已过时。尝试使用绑定函数的箭头函数，例如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>
    );
  }
}

类Testx扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
数据：{}
};
}
componentDidMount=（）=>{//注意用于绑定此函数的箭头函数
//像componentDidMount这样的函数通常已经绑定
axios.get（）http://localhost/index.php')