Question

我正尝试根据从服务器获取的数组数据来渲染几个复选框。这就是我声明状态变量的方式

 this.state = {
           isLoading: true,
           checkBoxes: []
        };

//This is how I set value in componentDidMount

componentDidMount() {
    console.log("Data from JSON = " + JSON.stringify(this.props.dataSource[GLOBAL.JSONKEYS.OPTIONS]));

this.setState({
        checkBoxes: JSON.stringify(this.props.dataSource[GLOBAL.JSONKEYS.OPTIONS]),
        isLoading: false
      });
}


 render() {
    if (this.state.isLoading) {
      return (
        <View style={styles.activityStyle}>
          <ActivityIndicator size="large" />
        </View>
      );
    }

    console.log("checkboxArray in render = " + this.state.checkBoxes);

   ... code to render view

}

下面是在控制台上生成的日志

来自JSON的数据=   [{“ id”：1，“ value”：“ Category1”，“ isChecked”：false}，{“ id”：2，“ value”：“ Category2”，“ isChecked”：false}，{“ id”： 3，“ value”：“ Category3”，“ isChecked”：false}，{“ id”：4，“ value”：“ Other”，“ isChecked”：false}]
     渲染中的
checkboxArray =

您可以看到，尽管我确实在componentDidMount中获取了数据，但render方法中的checkboxArray似乎仍然为null。好像它的值没有被设置。我在这里做错什么了吗？任何帮助表示赞赏。

Answer 1

您需要从数据中获取isChecked值并将其收集并设置为在componentDidMount中声明它们。

    const checkBoxes = [];
    const data = this.props.dataSource[GLOBAL.JSONKEYS.OPTIONS];
    data.map((item) => {
        checkBoxes.push(item.isChecked);
    });

    this.setState({
        checkBoxes,
        isLoading: false
    });

无法在React Native中的渲染中设置状态数组值

1 个答案: