Question

我正在通过以下网址实施React标签：https://codesandbox.io/s/7mjxpo9k7x

当前代码：

  <Tabs>
        <div label="Gator">
          See ya later, <em>Alligator</em>!
        </div>
        <div label="Croc">
          After &apos;while, <em>Crocodile</em>!
        </div>
        <div label="Sarcosuchus">
          Nothing to see here, this tab is <em>extinct</em>!
        </div>
  </Tabs>

但是，标签应该是动态的，因此我将map函数用于在本地状态下创建的名为“域”的数组，如下所示：

export class AddComponent2 extends Component {
constructor(props) {
    super(props)
    this.state = {
        domains: [],         

    };
}

componentDidMount() {       
    apiClient.getDomains().then(result => {
        this.setState({ domains: result });
            }); 
}

render() {
    return (
        <div>
            <Tabs>
                {this.state.domains.map(x =>
                    <div label="{x.domainCode}">
                        See ya later, <em>Alligator</em>!
                     </div>
                )}
            </Tabs>

        </div>
    )
}
  }
  export default AddComponent2;

但这会导致以下错误：

TypeError：无法读取未定义的属性“ props”

this.state = {         activeTab：this.props.children [0] .props.label，        };

数组中有数据。当我对值进行硬编码（如url中的示例中所述）时，我没有问题。为什么？

谢谢！

Answer 1

您的错误可能并非源于您过去的代码，因为您的代码中没有{ activeTab: this.props.children[0].props.label};。

但是我认为，您尝试获取尚未拥有的属性，因为您异步获取道具。因此，您应该检查何时收到响应，并在此处设置activeTab

apiClient.getDomains().then(result => {
        this.setState({ domains: result, activeTab:... });
});

反应，动态生成标签时出错

1 个答案: