Javascript react无状态子组件不会在父组件中的状态更改时更新

我正在构建一个小的选项卡式应用程序，其中每个选项卡都呈现一个子组件

我希望每个选项卡显示不同的内容，因此我在

render（）{….}

外部创建了一个对象

contentTypes

，以将每个选项卡映射到它对应的子组件。子组件通过道具接收处理程序和状态

class App extends Component {
    state ={
        contentType: "A",
        title: "Overview",
        searchContent: ""
    }

    tabHandler= (content,event)=>{
       console.log("clicked");
       this.setState({
          title: event.target.name,
          contentType: content
       });
    }
    searchHandler = (event) => {

       // this performs a search on a database and 
       //returns suggestions for the current input

       this.setState({
          searchContent: event.target.value
       });
   }  

    contentTypes = {
        A: <A/>,
        B: <B/>,
        C: <C onchange={this.searchHandler.bind(this)} content={this.state.searchContent}/>
    };
    render() {
      return (
        <div className="row">
          <ul>
           <Tab click={this.tabHandler.bind(this)} id="A" name="A"/>
           <Tab click={this.tabHandler.bind(this)} id="B" name="B"/>
           <Tab click={this.tabHandler.bind(this)} id="C" name="C"/>
         </ul>
        <h1 id="title">{this.state.title}</h1>

        {this.contentTypes[this.state.contentType]}

       </div>
     );
   }
}

类应用程序扩展组件{
陈述={
内容类型：“A”，
标题：“概述”，
搜索内容：“
}
tabHandler=（内容、事件）=>{
控制台日志（“单击”）；
这是我的国家({
标题：event.target.name，
contentType:content
});
}
searchHandler=（事件）=>{
//这将对数据库和数据库执行搜索
//返回当前输入的建议
这是我的国家({
searchContent:event.target.value
});
}  
内容类型={
甲:,，
乙:,，
C:
};
render（）{
返回(


{this.state.title}
{this.contentTypes[this.state.contentType]}
);
}
}

子组件是无状态的，定义如下：

import React from 'react'
import Field from './form-builder/field';

const C = (props) => {

return(

    // Field is another stateless component with formatted <input> tags

    <Field type="text" name="search" content={props.content} onchange={props.onchange}/>
  );
 }

export default C;

从“React”导入React
从“./form builder/Field”导入字段；
常量C=（道具）=>{
返回(
//字段是另一个带有格式化标记的无状态组件
);
}
导出默认C；

字段定义如下：

import React from 'react';

const field = (props) => {
    <li className="field">
       <input type="text" onChange={props.onchange} value={props.content} />
       <label htmlFor={props.name}>{props.value}</label>
    </li>
}
export default field;

从“React”导入React；
常量字段=（道具）=>{

{props.value}

}
导出默认字段；

问题是，当我从

字段

内部调用处理程序来更新父组件中的状态时（带有

render（）{..}

的组件），子组件不会使用新状态进行更新

---

关于如何解决这个问题有什么想法吗？

您可以将

contentTypes

定义为类属性。
这实际上与：

class App extends Component {
  constructor() {
    this.contentTypes = {
      A: <A />,
      B: <B />,
      C: <C
           onchange={this.searchHandler.bind(this)}
           content={this.state.searchContent}/>
    }
  }
}

类应用程序扩展组件{
构造函数（）{
此.contentTypes={
甲:,，
乙:,，
C:
}
}
}

因此，元素在构造函数中呈现，并且从未获得任何道具更新。
以下是解决此问题的方法：

class App extends Component {
  contentTypes = {
    A: () => (<A/>),
    B: () => (<B/>),
    C: () => (
        <C
          onchange={this.searchHandler.bind(this)}
          content={this.state.searchContent} />
       )
  }

  // ...

  render () {
    const Content = this.contentTypes[this.state.contentType]

    return (
      <div>
      {/* ... */}
        <Content />
      </div>
    )
  }
}

类应用程序扩展组件{
内容类型={
A:（）=>（），
乙：（）=>（），
C:（）=>(
)
}
// ...
渲染（）{
const Content=this.contentTypes[this.state.contentType]
返回(
{/* ... */}
)
}
}

请将

字段添加为well@RIYAJKHAN补充