Javascript 在父组件向其传递新道具后，子组件未更新

当我从onChange（）获取userInput并尝试将其传递给子组件时，它不会更新，而是保留初始值。 我试图将字符串从输入字段传递到名为Tensor flow Toxic Model的子组件，但是Tensor flow Toxid Model的状态在初始设置后不会改变。所以我不能运行moddl

class TensorFlowToxicModel extends React.Component<{}, ToxicityModelProp> {
  constructor(props: userInput) {
    super(props);
    this.state = {
      modelObjectArray: [],
      userSentence: props.userSentence,
    };
  }      
  componentDidUpdate(){
    console.log("This is from TensorFlowToxicModel Compononent")
    console.log("This is the sentence ", this.state.userSentence )
  }
  renderThePost = () => {
    let output = cleanMlOutput(this.state.userSentence)
    return output
  };
  render() {
    return (
      <div>
        <p>This is a Checker Does this even work</p>
      </div>
    );
  }
}

class InputField extends React.Component<{}, userInput> {
  constructor(prop: inputFromField) {
    super(prop);
    this.state = {
      userSentence: "",
    };
  }
 
  handleChange = (event: React.FormEvent<HTMLInputElement>): void => {
    let userInputData: string = event.currentTarget.value;
    //console.log(event.currentTarget.value);
    
    this.setState({
      userSentence: userInputData,
    }); 
  };

  render() {
    const userSentence = {
      userSentence:this.state.userSentence
    }
    //Instead of updating TensorFlowToxicModel Each time from inside its own compnoent 
    //Call it here each time user types something
    return (
      <div>
        <input id="inputField" onChange={this.handleChange} />
        <h4>{this.state.userSentence}</h4>
        
        <TensorFlowToxicModel {...userSentence}/>
        
      </div>
    );
  }
}

---

您将

prop

类型

ToxicityModelProp

放错了位置。它应该是第一个。有关组件道具、状态类型的信息，请阅读本文

type ToxicityModelProp = { userSentence: string } 
type ToxicityModelState = { modelObjectArray: [] }


class TensorFlowToxicModel extends React.Component<ToxicityModelProp, ToxicityModelState> {
  constructor(props: userInput) {
    super(props);
    this.state = {
      modelObjectArray: []
    };
  } 
  renderThePost = () => {
    let output = cleanMlOutput(this.props.userSentence)
    return output
  };
  render() {
    return (
      <div>
        <p>Sentence is: { this.props.userSentence }</p>
      </div>
    );
  }
}

type ToxicityModelProp={user句子：string}
类型ToxicityModelState={modelObjectArray:[]}
类TensorFlowToxicModel扩展了React.Component{
构造函数（道具：userInput）{
超级（道具）；
此.state={
modelObjectArray:[]
};
} 
renderThePost=（）=>{
let output=cleanMlOutput（this.props.user句子）
返回输出
};
render（）{
返回(
句子是：{this.props.user句子}

);
}
}

---

我对您的代码和更新做了一些更改。查看它

尝试查看

componentdiddupdate（）

，

https://reactjs.org/docs/react-component.html#componentdidupdate

但这不是每个组件本身的问题吗？比如，它知道如何更新父组件吗？我猜我是在父组件中这样做的？你能console.log吗（event.target.value，event.currentTarget.value）？在

handleChange

的内部，它只返回键盘输入，但这会导致typescript出现错误：键入“{UserSession:{UserSession:string；}；}”'不可分配给类型'IntrinsicAttributes&IntrinsicClassAttributes&Readonly&Readonly'。类型'IntrinsicAttributes&IntrinsicClassAttributes&Readonly&Readonly'上不存在属性'UserSession'。在TensorFlowToxicModel内部打印也不会给我这一点，而是提供传递的初始值。

Tensor是什么FlowToxicModel

？是您的自定义组件还是任何库？它是一个从tensorflowToxicModel获取数据的自定义组件，它来自一个函数我已将其添加到问题中

type ToxicityModelProp = { userSentence: string } 
type ToxicityModelState = { modelObjectArray: [] }


class TensorFlowToxicModel extends React.Component<ToxicityModelProp, ToxicityModelState> {
  constructor(props: userInput) {
    super(props);
    this.state = {
      modelObjectArray: []
    };
  } 
  renderThePost = () => {
    let output = cleanMlOutput(this.props.userSentence)
    return output
  };
  render() {
    return (
      <div>
        <p>Sentence is: { this.props.userSentence }</p>
      </div>
    );
  }
}