反应 defaultValue 不工作 axios 提供动态数据

Question

你好，我是 React 的新手，我正在尝试使用 React，但有一点我不明白。

首先，使用 axios 数据获取 return 我的数据，以下，然后我尝试将它们放入输入字段，值（并且是只读的），默认值更好，现在我有问题，我什么也没看到，当我用 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'));

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

"code style" 已过时。尝试使用绑定函数的箭头函数，例如 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 分钟内帮助我快乐

我现在也找到了玩 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} />

反应 defaultValue 不工作 axios 提供动态数据

React defaultValue not working axios deliverd dynamic data

javascript

node.js

reactjs

axios