javascript - 在 onChange 事件从粘贴 (ctrl+v) 接收到数据后，React Initiating 组件重新渲染

Question

我试图在将 URL 粘贴到输入字段后发起 API 请求，然后在页面上显示结果。

根据文档和this SOF 上的链接，setState 是启动重新渲染的方式，我知道而且我自己的做法似乎是正确的，但是有些东西不对劲，只有当我再次执行 onChange 时我才获得 url 状态，React 似乎没有在任何可用的生命周期事件中的任何位置显示我粘贴的数据。

使用 create-react-app:

import React from "react";
import ReactDOM from "react-dom";

const UserInput = props => {
  return (
    <div>
      <label>Enter URL:</label>
      <input onChange={props.handleChange} type="text" value={props.value} />
    </div>
  );
};

class Fetch extends React.Component {
  constructor() {
    super();
    this.state = {
      url: null,
      userData: null,
      fetching: false,
      error: null
    };
  }

  componentDidUpdate() {
    this.fetchData();
  }

  fetchData() {
    fetch(this.state.url)
      .then(result => result.json())
      .then(json => this.setState({ userData: json }))
      .error(error => console.log(error));
  }

  render() {
    return this.props.render();
  }
}

const UserProfile = ({ name, gender }) => {
  return (
    <div>
      Hey {name}, you are {gender}!
    </div>
  );
};

class App extends React.Component {
  constructor() {
    super();

    this.state = {
      url: null
    };
  }

  handleChange(e) {
    this.setState({
      url: e.target.value
    });
  }

  render() {
    return (
      <div>
        <UserInput
          value={this.state.url}
          handleChange={this.handleChange.bind(this)}
        />
        <Fetch url={this.state.url} render={data => <UserProfile />} />
      </div>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

如果您在该字段中粘贴任何 URL，您将不会使其处于状态，因此当 fetchData 被触发时它的

this.state.url

实际上仍然是空的。

谢谢

Answer 1

您的 Fetch 组件和 App 组件正在使用 url 的两个单独副本导致问题的状态，您必须使用 url你作为 Prop 传递给 Fetch组件代替。

class Fetch extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      // url: null, remove this
      userData: null,
      fetching: false,
      error: null
    };
  }

  componentDidUpdate() {
    this.fetchData();
  }

  fetchData() {
    fetch(this.props.url) // update here
      .then(result => result.json())
      .then(json => this.setState({ userData: json }))
      .error(error => console.log(error));
  }

  render() {
    return this.props.render(userData); // the render prop is a function in your case that expects data
  }
}

也更新以下行，以便 UserProfile 获取已从 API 获取的数据。我不确定 key

<Fetch url={this.state.url} render={data => <UserProfile name={data.name} gender={data.gender}/>} />