试图将状态转换为const React类 - 总是得到TypeError：this.setState不是函数

Question

对不起，我是React的新手，之前问了一个类似的问题，但改变了我的代码形式。我试图在const反应类​​中获取状态值。

在我的Article.js中

  function changeClassName(childData) {
      console.log("GETS HERE!");
this.setState({
  dynamicClassName: childData
});

}

const Articles = ({ data, isLoading, error }) => {
    console.log(data);
    console.log(isLoading);
  const article_wrapper = data.nodes || [];

  if (error) {
    return <p>{error.message}</p>;
  }

  if (isLoading) {
    return <p>Loading ...</p>;
  }

  return (
    <div className="article">
      {article_wrapper.map( article =>
        <div key={article.node.nid} className="article-main-display">
       <h1 className="title" dangerouslySetInnerHTML={createMarkup(article.node.title)}/>
          <div className="img-div"><img src={article.node.field_image.src} /></div>

          <ControlForm parentMethod={changeClassName} />

          <div dangerouslySetInnerHTML={createMarkup(article.node.field_user_hsk_level)} />;
          <div className="field-name-field-chinese">
          <div dangerouslySetInnerHTML={createMarkup(article.node.chinese)} />;
                  </div>
        </div>
      )}
    </div>
  );
}

在我的ControlForm.js中

部分渲染：

        <div className="form-item form-type-select form-group">
          <label className="control-label">Font Size</label>
          <select
            value={this.state.value}
            onChange={this.handleSizeSelect}
            id="font-size"
            className="form-control form-select"
          >
            <option value="0">Small</option>
            <option value="1">Normal</option>
            <option value="2">Large</option>
            <option value="3">XL</option>
          </select>
        </div>

班级启动看起来像这样：

class ControlForm extends Component {
  constructor() {
    super();
    this.state = { toggleActive: false, sizeSelect: "0", speed: 1.3, volume: .6};
    this.onToggle = this.onToggle.bind(this);
    this.handleSpeedChange = this.handleSpeedChange.bind(this);
    this.handleVolumeChange = this.handleVolumeChange.bind(this);
    this.handleSizeSelect = this.handleSizeSelect.bind(this);
  }

当我尝试使用它时，我收到此错误：

TypeError: this.setState is not a function

但是，无论何时我尝试将const Articles = ...转换为正式的类X扩展组件结构，我都会遇到一堆其他错误。

如何成功将状态置于此组件中？我整天都在撞墙，我无法想办法做到这一点。

Answer 1

如果您使用const，那么您的文件应该是.ts扩展名。要访问.ts中的状态，您需要定义其中的状态类型。请参阅此示例，了解如何执行此操作：

[Reactj, typescript Property 'setState' is missing in type

否则，如果你想使用.jsx，那么我建议你删除const并在构造函数之外声明状态。

Answer 2

首先，你的文章不是React组件，这就是为什么你不能使用setState函数，然后你的函数changeClassName没有在React.Component中声明，这就是为什么你看到this.setState不是一个函数。试试这个：

class Article extends React.Component {

 changeClassName = () => {
   //function body
 }
 //your codes...
}

如果你看到this.setState不是一个函数，大多数时候它只是因为你没有绑定你的函数。在React类中声明你的函数时，尝试使用es6箭头函数，如：

yourFunction = (args) => {
   this.setState({
    //.....
   });
 }

那么你不需要再在构造函数中手动绑定你的函数了

Answer 3

您的问题始于整个代码块：

  function changeClassName(childData) {
      console.log("GETS HERE!");
this.setState({
  dynamicClassName: childData
});

这是一个React组件吗？如果是，是功能组件还是基于类的组件？

我得到的是你需要创建一个基于类的React组件，如下所示：

class App extends React.Component {

  render() {
    return (
        <div>

        </div>
    );
  }
}

export default App;

现在，您将注意到，一旦您拥有基于类的React组件，您必须包含render()方法，否则您将收到错误。你在里面归还的是项目特定的。

您还需要创建一个基于类的组件，以便初始化状态，如下所示：

class App extends React.Component {
  state = { images: [] };

  render() {
    return (
        <div>

        </div>
    );
  }
}

export default App;

在这种情况下，我在我的App图像组件中设置了一个初始状态为空数组。

然后，只有在该类中，您才可以通过this.setState({ images: response.data.results });更新您的州。