Javascript 添加组件以查看React Native

我是一个比较新的本地人，所以请原谅你可能看到的一些不好的做法（请指出它们）

我目前正在尝试在React组件安装后动态加载该组件中的按钮。之所以这样做，是因为我在组件加载时调用了一个API，该组件请求一个数组，该数组具有我需要向用户显示的值

我已经成功地检索了数组并对其进行了循环，但是我没有在当前屏幕上显示按钮

我的代码是：

export default class Menu extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            token : "",
            unique_id : Constants.deviceId,
            qr_value : props.route.params.random_value,
            buttons : []
        }
    }

    componentDidMount(){
        this.testToken();
    } 

之后，我有一个render函数，它创建一个视图并调用getButtons（）函数

然后，renderButtons函数调用以下函数：

renderButton(button) {
      return (
            <TouchableOpacity
                style = {{backgroundColor: '#fff'}}
                onPress = {
                    () => this.generateToken()
                }
            >
                <View style={styles.button}>
                    <Text style={styles.title}>{button.value}</Text>
                </View>
            </TouchableOpacity>
            );
      }

    renderButtons = buttons => {
        return this.state.buttons.map((button, i) => {
        return (
                <View key={i}>
                    {this.renderButton(button)}
                </View>
                );
        });
    }

renderButton（按钮）{
返回(
this.generateToken（）
}
>
{button.value}
);
}
renderButtons=按钮=>{
返回此.state.buttons.map（（按钮，i）=>{
返回(
{this.renderButton（按钮）}
);
});
}

---

欢迎提供任何帮助或建议。

渲染方法不应运行fetch命令等。将加载按钮移动到

componentDidMount（）

，并使用

this.setState（{buttons:res.data.options}）以正确更新状态（导致重新渲染）。在render（）方法中，使用
{this.renderButtons（）}
。（管理/更新组件的状态并通过render（）显示它应该是完全独立的）非常感谢您的回答。这实际上现在起作用了。我还有一个问题，你可能知道答案。当用户返回屏幕时，是否有方法重置状态值？基本上，应用程序加载QR扫描仪，用户扫描QR，获得一些选项，选择一个，然后他应该返回QR扫描仪组件。但是，this.state.scanned值与上一次扫描相比保持为真。我需要它返回false以触发另一个扫描事件。如果这是从childA向childB发送消息的情况，答案是将状态提升到公共父级。现在，您可以将状态作为prop传递给childB，并将设置状态为prop的函数传递给childA。一般来说，我们不会跟进，尤其是在评论中。寻找现有的解决方案，进行研究，使用Google和stackoverflow进行搜索，如果你确定没有现有的答案，打开一个新问题。你还应该检查你的QRScanner组件的
componentDidMount
是否再次被调用，因为这很可能是情况，也是初始化/重置状态的最佳位置。
getButtons(token) {
        fetch('link hidden', {
            method: 'POST',
        }).then(response => response.json().then(data =>({
            data: data,
            status: response.status
        })
        ).then(res => {
              this.state.buttons = res.data.options;
//              this.buttons = this.state.buttons.map((item, key) =>
//                  console.log(item)
//              );
              this.renderButtons();
        }));
    }

renderButton(button) {
      return (
            <TouchableOpacity
                style = {{backgroundColor: '#fff'}}
                onPress = {
                    () => this.generateToken()
                }
            >
                <View style={styles.button}>
                    <Text style={styles.title}>{button.value}</Text>
                </View>
            </TouchableOpacity>
            );
      }

    renderButtons = buttons => {
        return this.state.buttons.map((button, i) => {
        return (
                <View key={i}>
                    {this.renderButton(button)}
                </View>
                );
        });
    }