Question

我的index.jsx中有以下代码用于主页

toggleDescription(product, success = true) {
    if (success) {
      this.descriptionText = t('products/product_description', {
        name: item.product,
      });
    this.setState({
      open: !open
      failure: !success
   });
}
---some code here---

return (
  <div>
  </Description
  isOpen={this.state.open}
  onRequestClose={this.toggleDescription}
  message={this.descriptionText}
  isError={failure}
  >
  <div> --delete and close buttons here-- </div>
  </Description>

我有descriptionText的翻译。我正在切换描述组件。当我第一次加载应用程序时，我得到标题中的错误，因为描述文本未定义。我该如何解决这个问题？

Answer 1

您确实不应该将值直接保存到组件中。除非价值由州管理，否则不会保证孩子们重新渲染。

你应该改变这个;

getInitialState() {
    return {
        descriptionText: 'default text'
    }
},

toggleDescription(product, success = true) {
    if (success) {
      this.setState({
          descriptionText: t('products/product_description', {
              name: item.product,
          }),
          open: !open,
          failure: !success
      });
},

render() {
    return (
  <div>
  </Description
  isOpen={this.state.open}
  onRequestClose={this.state.toggleDescription}
  message={this.state.descriptionText}
  isError={failure}
  >
  <div> --delete and close buttons here-- </div>
  </Description>

Answer 2

第一个选项是，您可以将this.descriptionText设置为默认值，例如空字符串或constructor上的内容

constructor(props) {
  super(props);
  this.descriptionText = 'some default value or empty string';
}

或者您可以像下面一样使用它，

message={this.descriptionText || 'some default value or empty string'}

失败的道具类型：道具`message`在`Description`中标记为必需，但其值为'undefined`

2 个答案: