我有一个名为Nav的组件。当用户在搜索栏中使用类型时，我想将 props 发送到另一个名为 Body 的组件。我遇到的问题是，当我在搜索栏中键入内容时，Body 组件中的值不会更改。
导航类:
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 });
}
谢谢。
最佳答案
componentDidMount 仅在组件首次安装时运行。您可以将逻辑移至单独的方法，并在 valorId 属性更改时在 componentDidMount 和 componentDidUpdate 中调用该方法。
示例
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() {
// ...
}
}
关于javascript - React - 当事件发生时如何更改子组件的 props？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55226846/