Question

对不起，我是React的新手，之前曾问过类似的问题，但是更改了代码的形式。我正在尝试在const react类中获取状态值。

在我的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扩展Component结构时，都会遇到很多其他错误。

如何使状态成功进入此组件？我整天都在撞墙，我不知道该怎么做。

Answer 1

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

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

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

Answer 2

首先，您的文章不是React Component，这就是为什么您不能使用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 });更新状态。

试图让状态进入const React类-总是得到TypeError：this.setState不是一个函数

3 个答案: