Question

我有一个名为 Nav 的组件。当用户在搜索栏中使用类型时，我想将道具发送到另一个名为 Body 的组件。我遇到的问题是，当我在搜索栏中键入内容时， Body 组件中的值不会更改。

Nav类：

constructor(props) {
  super(props);
  this.state = { id: "" };

  this.handleChange = this.handleChange.bind(this);
}

handleChange = event => {
  this.setState({ id: event.target.value });
};

render() {
  return (
    <div>
      <nav className="navbar navbar-expand-lg navbar-dark bg-dark">
        <button
          className="navbar-toggler"
          type="button"
          data-toggle="collapse"
          data-target="#navbarTogglerDemo03"
          aria-controls="navbarTogglerDemo03"
          aria-expanded="false"
          aria-label="Toggle navigation"
        >
          <span className="navbar-toggler-icon" />
        </button>

        <a className="navbar-brand" href="#">
          <img src="https://icon-icons.com/icons2/1412/PNG/48/comics-spiderman-cam_97492.png" />
          Home
        </a>

        <div className="collapse navbar-collapse" id="navbarTogglerDemo03">
          <ul className="navbar-nav mr-auto mt-2 mt-lg-0">
            <li className="nav-item active">
              <a className="nav-link" href="#">
                <span class="sr-only">(current)</span>
              </a>
            </li>
            <li className="nav-item">
              <a className="nav-link" href="#">
                Link
              </a>
            </li>
            <li className="nav-item">
              <a
                className="nav-link disabled"
                href="#"
                tabindex="-1"
                aria-disabled="true"
              >
                Disabled
              </a>
            </li>
          </ul>
          <form
            className="form-inline my-2 my-lg-0"
            onSubmit={() => {
              console.log(this.state.id);
            }}
          >
            <input
              className="form-control mr-sm-2"
              type="search"
              placeholder="Search"
              aria-label="Search"
              value={this.state.id}
              onChange={this.handleChange}
            />
            <button className="btn btn-light" type="submit">
              Search
            </button>
          </form>
        </div>
      </nav>
      <Body valorId={this.state.id} />
      {alert(this.state.id)}
    </div>
  );
}

身体类别：

constructor(props) {
  super(props);
  this.state = { heroe: null, loading: true };
}

async componentDidMount() {
  const url = "https://superheroapi.com/api/2132321/" + this.props.valorId;
  console.log("aca va:" + this.props.valorId);
  alert(url);
  const response = await fetch(url);
  const data = await response.json();
  console.log(data.name);
  this.setState({ heroe: data, loading: false });
}

谢谢。

Answer 1

componentDidMount仅在首次安装组件时运行。相反，您可以将逻辑移至单独的方法，并在componentDidMount属性更改时在componentDidUpdate和valorId中进行调用。

示例

class Body extends React.Component {
  constructor(props) {
    super(props);
    this.state = { heroe: null, loading: true };
  }

  componentDidMount() {
    this.loadHeroe();
  }

  componentDidUpdate(prevProps) {
    if (this.props.valorId !== prevProps.valorId) {
      this.loadHeroe();
    }
  }

  loadHeroe = async () => {
    this.setState({ loading: true });

    const url = "https://superheroapi.com/api/2132321/" + this.props.valorId;
    const response = await fetch(url);
    const data = await response.json();

    this.setState({ heroe: data, loading: false });
  };

  render() {
    // ...
  }
}

Answer 2

问题是您使用componentDidMount 在组件安装时，此功能被调用一次。

尝试改用componentDidUpdate

反应-事件发生时如何更改子组件的道具？

2 个答案: