Javascript 使用Reactjs中的状态更改更新子组件

所以我知道这个问题已经被问了好几次了，一般的让步是道具已经传给孩子了，不能改变。我在这里遇到的情况是，基本上我在不同的文件中有一个不同的onClick函数，它用一个innerHTML更新id=“movie header”，domsubtreemedited和componentdiddupdated检测更改并将新的道具传递给孩子“Ebay”

因此，这里的问题是如何让Ebay组件更新其状态，并在moviemodalwindow（Ebay的父级）中的状态每次更改时使用新值

MovieModalWindow.js

import React from "react";
import "../MovieGo.css";
import Ebay from "../Store/Ebay";

class MovieModalWindow extends React.Component {
  constructor() {
    super();
    this.state = {
      name: 1
    };
  }
  componentDidMount() {
    var element = document.getElementById("movie-header");
    element.addEventListener("DOMSubtreeModified", this.myFunction(element));
    var name = this.state.name + 1;
    this.setState({ name: [...this.state.name, name] });
  }

  myFunction = input => event => {
    this.setState({ name: input.innerHTML });
  };
  componentDidUpdate(prevProps, prevState) {
    if (prevState.name != this.state.name) {
      window.localStorage.setItem("keyword", this.state.name);
    }
  }

  render() {
    return (
      <div id="myModal" class="modal">
        <div class="modal-content">
          <span onClick={onClose} class="close">
            &times;
          </span>
          <h1 id="movie-header" />
          <div className="middle-window">
            <div className="left">
              <Ebay id="ebay" keyword={this.state.name} />
            </div>
          </div>
          <h3>PLOT</h3>
          <p id="moviedetails" />
        </div>
      </div>
    );
  }
}

export default MovieModalWindow;

从“React”导入React；
导入“./MovieGo.css”；
从“./Store/Ebay”导入易趣；
类MovieModalWindow扩展React.Component{
构造函数（）{
超级（）；
此.state={
姓名:1
};
}
componentDidMount（）{
var元素=document.getElementById（“电影标题”）；
element.addEventListener（“domsubtredemodified”，this.myFunction（element））；
var name=this.state.name+1；
this.setState（{name:[…this.state.name，name]}）；
}
myFunction=input=>event=>{
this.setState（{name:input.innerHTML}）；
};
componentDidUpdate（prevProps、prevState）{
if（prevState.name！=此.state.name）{
window.localStorage.setItem（“关键字”，this.state.name）；
}
}
render（）{
返回(
&时代；
情节

Ebay.js文件

import React from "react"

class Ebay extends React.Component{
  constructor(){
    super();
    this.state={
      data:[],
    }
  }
  componentWillUpdate(prevProps, prevState){
    if (prevProps.keywords!=this.props.keywords){
      console.log(window.localStorage.getItem("keyword"))
    }

  render(){
    const{newInput} =this.props
    return(
      <div>
      </div>
    )
  }
}
export default Ebay

从“React”导入React
类。组件{
构造函数（）{
超级（）；
这个州={
数据：[]，
}
}
组件将更新（prevProps、prevState）{
if（prevProps.keywords！=此.props.keywords）{
console.log（window.localStorage.getItem（“关键字”））
}
render（）{
const{newInput}=this.props
返回(
)
}
}
导出默认易趣

我不确定我是否回答了您提出的问题，因此如果这不是您要问的问题，请道歉

步骤1.当您需要更新时，更改易趣的道具。（我想您已经说过了？）

步骤2：当道具发生变化时更新易趣的状态。在这里，您可以使用

组件查看道具的变化，并相应地更新状态

class Ebay extends React.Component {
  constructor() {
     super();
     this.state = { data: [] };
  }

  componentWillRecieveProps(nextProps) {
    if (nextProps.keyword !== this.props.keyword) {
       this.setState({ data: ['something new'] });
    }
  }

  render() { ... }
}

您想在易趣的道具发生变化时更新其状态吗？您的
控制台.log
是否被击中？（而且您在
组件willupdate
上缺少一个右括号）是，但只更新一次