javascript - react defaultValue无法正常工作axios传递动态数据

您好，我是React的新手，我想和React玩一点，但我不明白这点。

首先，用axios数据获取返回我的数据的数据，然后，然后我尝试将它们放入输入字段中，值（是只读的），defaultValue更好，现在我遇到了问题，我什么也没看到，值存在当我使用萤火虫查看时，奇怪的是，当我添加不需要的字符时，输入内容会被我想要的但不是默认情况下填充。

十分奇怪的是，当我将所有内容放入Array并对其执行map函数时，我拥有了价值

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

关于javascript - react defaultValue无法正常工作axios传递动态数据，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/45741256/