Javascript 在开始时更改道具值和子组件断开

在CountryTabSequence组件上的渲染中，出现以下错误：

src/components/CountryTabSequence.js:13:22， 无法读取未定义的属性“forEach”

因为加载我的页面时props值是空数组。。。当我的道具设置好后，我如何修复它并重新启动我的组件

我尝试在我的子组件中使用此修复程序，但它不起作用：

if(sequence) {
    myForeach...
}

父级：SequenceEdit.js

class SequenceEdit extends Component {
    constructor(props) {
        super(props);

        this.props.getOneSequence(this.props.match.params.id);
    }

    render() {
        return (
            <CountryTabSequence sequence={this.props.currentSequence}/>
        )
    }
}

const mapStateToProps = (state) => {
    return {
        currentSequence: state.currentSequence
    };
};

const mapDispatchToProps = (dispatch) => ({
    ...bindActionCreators({
        getOneSequence
    }, dispatch)
});

export default withRouter(connect(mapStateToProps, mapDispatchToProps)(SequenceEdit));

class SequenceEdit扩展组件{
建造师（道具）{
超级（道具）；
this.props.getOneSequence（this.props.match.params.id）；
}
render（）{
返回(
)
}
}
常量mapStateToProps=（状态）=>{
返回{
currentSequence:state.currentSequence
};
};
const mapDispatchToProps=（调度）=>({
…bindActionCreators({
getOneSequence
}，调度）
});
使用路由器导出默认值（connect（mapStateToProps，mapDispatchToProps）（SequenceEdit））；

子项：CountryTabSequence.js

const renderCountryTabSequence = (sequence) => {
    let countryPreview = '<ul class="nav nav-tabs" id="myTab" role="tablist">';

    if(sequence) {
        sequence.buckets.forEach((bucket) => {
            countryPreview += `<li class="nav-item">${bucket.country.code}</li>`;
        });
    }

    countryPreview += '</ul>';

    return countryPreview;
};

const CountryTabSequence = (props) => {
    return (
        <div className="content" dangerouslySetInnerHTML={{__html: renderCountryTabSequence(props.sequence)}}></div>
    );
};

export default CountryTabSequence;

const renderCountryTabSequence=（sequence）=>{
让countryPreview='
；
if（序列）{
sequence.bucket.forEach（（bucket）=>{
countryPreview+=`
${bucket.country.code}
`；
});
}
countryPreview+='
'；
返回国家预览；
};
const CountryTabSequence=（道具）=>{
返回(
);
};
导出默认顺序；

我建议您检查道具（在所有情况下，无论阵列是否为空）：

onst renderCountryTabSequence=（sequence）=>{
让countryPreview='
；
常量{bucket=[]}=序列| |{}；
if（数组isArray（桶））{
sequence.bucket.forEach（（bucket）=>{
countryPreview+=`
${bucket.country.code}
`；
});
}
countryPreview+='
'；
返回国家预览；
};

我建议您检查道具（在所有情况下，无论阵列是否为空）：

onst renderCountryTabSequence=（sequence）=>{
让countryPreview='
；
常量{bucket=[]}=序列| |{}；
if（数组isArray（桶））{
sequence.bucket.forEach（（bucket）=>{
countryPreview+=`
${bucket.country.code}
`；
});
}
countryPreview+='
'；
返回国家预览；
};

您需要在子组件中处理序列的空条件（所需的属性）

const renderCountryTabSequence = (sequence) => {

  if (!sequence) {
    return <div>Loading ... ( or any loader component )  </div>
  }

  const htmlToReturn = (
    <ul className="nav nav-tabs" id="myTab" role="tablist">
      {sequence.buckets.map(aBucket => (
        <li
          key={aBucket.country.code}
          className="nav-item">
          {aBucket.country.code}
        </li>
      ))}
    </ul>
  )

  return htmlToReturn;
};

const renderCountryTabSequence=（sequence）=>{
如果（！序列）{
返回加载…（或任何加载程序组件）
}
常量htmlToReturn=(

{sequence.bucket.map（aBucket=>(

{aBucket.country.code}

))}

)
回归与回归；
};

您需要在子组件中处理序列的空条件（所需的属性）

const renderCountryTabSequence = (sequence) => {

  if (!sequence) {
    return <div>Loading ... ( or any loader component )  </div>
  }

  const htmlToReturn = (
    <ul className="nav nav-tabs" id="myTab" role="tablist">
      {sequence.buckets.map(aBucket => (
        <li
          key={aBucket.country.code}
          className="nav-item">
          {aBucket.country.code}
        </li>
      ))}
    </ul>
  )

  return htmlToReturn;
};

const renderCountryTabSequence=（sequence）=>{
如果（！序列）{
返回加载…（或任何加载程序组件）
}
常量htmlToReturn=(

{sequence.bucket.map（aBucket=>(

{aBucket.country.code}

))}

)
回归与回归；
};

您可以对道具进行分解，并为其指定如下默认值：

const CountryTabSequence = ({ sequence = [] }) => {
        return (
            <div className="content" dangerouslySetInnerHTML={{__html: renderCountryTabSequence(sequence)}}></div>
        );
    };

---

我还建议使用某种加载标志向用户显示数据仍在提取中或类似的内容，这样用户体验就不会很差。

您可以对道具进行分解，并为其指定如下默认值：

const CountryTabSequence = ({ sequence = [] }) => {
        return (
            <div className="content" dangerouslySetInnerHTML={{__html: renderCountryTabSequence(sequence)}}></div>
        );
    };

---

我还建议使用某种加载标志向用户显示数据仍在提取中或类似的情况，这样用户体验就不会很差。

在尝试对序列数组进行forEach之前，为什么不检查序列数组中是否设置了bucket

if（sequence&&sequence.bucket）{

if（sequence&&sequence.bucket）{{你不需要

DangerouslySetinerHTML

为此，最好将其重写为JSX。你不需要

DangerouslySetinerHTML

为此，最好将其重写为JSX