如何在输入值反应js中设置我的值答案

【问题标题】：How to set my value in input value react js如何在输入值反应js中设置我的值
【发布时间】：2019-10-21 14:32:57
【问题描述】：

我试图在输入值中设置我的值，但我一直在控制台中获得undefined，我想从 API 中设置值，但我不知道如何在输入值中设置值，我当我在输入中设置value={2} 时，还尝试删除 ref 并查看但仍然值输入显示undefined。

这里是：

this.state = {
      // movie: [],
      user: this.props.value,
      text: "",
      errors: []
    };


async componentDidMount() {
    try {
      const res = await fetch(
        `https://softbike.dev.myddp.eu/api/1/deliveries/user1/`
      );
      const movie = await res.json();
      console.log(movie);
      this.setState({
        movie: movie.pk
      });
    } catch (e) {
      console.log(e);
    }
  }

  handleChange(event) {
    this.setState({
      [event.target.name]: event.target.value
    });
    console.log(this.state);
  }

这里是输入代码：

<div className="row">
          <div className="col-sm-12">
            <label id="p"> UZYTKOWNIK</label>
            <input
              type="text"
              ref="user"
              className="form-control"
              name="user"
              value={movie.id}
              onChange={this.handleChange}
            />
           <p>g {this.state.value}</p>
          </div>

请帮我解决这个问题。

【问题讨论】：

React 的 setState 是异步的。如果您在render() 方法中使用console.log(this.state)，您是否看到您尝试使用的数据？
电影没有在任何地方定义
用movie = {}初始化状态并使用value={this.state.movie}

标签： javascript reactjs forms api

【解决方案1】：

<div className="col-sm-12">
   <label id="p"> UZYTKOWNIK</label>
   <input
      type="text"
      ref="user"
      className="form-control"
      name="user"
      value={this.state.movie && this.state.movie.id}
      onChange={this.handleChange}
 />
</div>

【讨论】：

【解决方案2】：

试试这个：

this.state = {
    movie: {},
    user: this.props.value,
    text: "",
    errors: []
};


componentDidMount() {
    const fetchMovie = async () => {
        try {
          const res = await fetch(`https://softbike.dev.myddp.eu/api/1/deliveries/user1/`);
          const movie = res.json();
          console.log(movie);
          this.setState({
             ...this.state,
             movie: movie.pk
          });
        } catch (e) {
           console.log(e);
        }
    }
    fetchMovie(); // Call async fundtion
}

  handleChange(event) {
    this.setState({
      [event.target.name]: event.target.value
    }, () => {
        console.log(this.state);
        // Because setState is async function, so you have to console.log in callback of
        // setState to see the new data of this.state
    });
  }

输入：

<div className="row">
    <div className="col-sm-12">
        <label id="p"> UZYTKOWNIK</label>
        <input
          type="text"
          ref="user"
          className="form-control"
          name="user"
          defaultValue={this.state.movie.id}
          onChange={this.handleChange}
        />
    <p>g {this.state.value}</p>
</div>

【讨论】：