reactjs - React Native Component 不会随着状态变化而更新

问题描述

所以我做了很多 React Web 开发。不是很多 React Native 但这对我来说真的很疯狂。我有这个组件

相关代码

 componentDidMount() 

    axios.get(URL + 'ATL')
    .then(function (response) {
      // handle success
      console.log("AXRES1::",response);
        this.setState({
          rows: response.data,
          loading: false,
        })
    }.bind(this))
    .catch(function (error) {
      // handle error
      console.log("AXRES2::",error.message);
       this.setState({ loading: false })
    }.bind(this))
    .finally(function () {
      console.log("AXRES3::");
      this.setState({ loading: false })
    }.bind(this));

  }

render() {
    const placeholder = {
      label: 'Select SSA Region...',
      value: this.state.region,
      color: '#093387',
    };
    console.log("ROWS::",this.state.rows.length)
    return (
      <View style={{ flex: 1 }}>
        <View style={{ flex: 1 }}>
          <Swiper
            from={1}
            minDistanceForAction={0.1}
            controlsProps={{
              dotsTouchable: true,
              prevPos: 'bottom-left',
              nextPos: 'bottom-right',
              nextTitle: '',
              prevTitle: '',
              nextTitleStyle: { color: '#2298f2', fontSize: 50, fontWeight: '500' },
              prevTitleStyle: { color: '#2298f2', fontSize: 50, fontWeight: '500' }
            }}
          >
            <View style={{ flex: 1 }}>
              <Title style={styles.header}><Text h1>SSA Regional Locator App</Text></Title>
              <View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
                <Image
                  style={{}}
                  source={Images.USM}
                />
              </View>
            </View>

            <View style={{ flex: 1 }}>
              <Title style={styles.header}>Choose a Region</Title>
              <Title style={styles.header}>Find an Office {this.state.rows.length}</Title>
              <RNPickerSelect
                placeholder={placeholder}
                items={regions}
                onValueChange={value => {
                  console.log("VALUE::",value);
                  this.setState({
                    region: value,
                  });
                }}
                style={pickerSelectStyles}
                value={this.state.region}
                useNativeAndroidPickerStyle={false}
              />
              <DataTable>
                <DataTable.Header style={headerStyles}>
                  <DataTable.Title><Subheading>RO Name</Subheading></DataTable.Title>
                  <DataTable.Title><Subheading>Email</Subheading></DataTable.Title>
                  <DataTable.Title numeric><Subheading>Business Line</Subheading></DataTable.Title>
                  <DataTable.Title numeric><Subheading>State</Subheading></DataTable.Title>
                </DataTable.Header>
                {this.state.rows.map((row, i) => {
                  const img = "../images/flags/" + row.stateCode + ".png"
                  // console.log("ROW2::", img);
                  return (
                    <DataTable.Row key={i} style={rowStyles}>
                      <DataTable.Cell style={rowStyles}>{row.name}</DataTable.Cell>
                      <DataTable.Cell style={rowStyles}>{row.email}</DataTable.Cell>
                      <DataTable.Cell style={rowStyles} numeric>{row.businessLine}</DataTable.Cell>
                      <DataTable.Cell style={rowStyles} numeric>
                        <Image
                          style={{ width: 16, height: 12 }}
                          source={Images.flags[row.stateCode]}
                        />
                      </DataTable.Cell>
                    </DataTable.Row>
                  )
                })}
                <DataTable.Pagination
                  page={1}
                  numberOfPages={3}
                  onPageChange={(page) => { console.log(page); }}
                  label="1-2 of 6"
                />
              </DataTable>
            </View>
          </Swiper>
        </View>
      </View>
    );
  };
}

我正在成功更新我的行。我可以查看我的控制台日志，这些日志表明我的渲染和返回之间的控制台日志语句中的值从 1 到 652 行的变化。

2019-09-13 15:54:10.109 2708-2976/com.regionlocator I/ReactNativeJS: 'ROWS::', 1

2019-09-13 15:54:12.613 2708-2976/com.regionlocator I/ReactNativeJS: 'ROWS::', 652

从我在这里检查的数据中，数据看起来也是正确的

console.log("AXRES1::",response)

这是我期待的对象数组。但我的数据表永远不会改变。也没有错误。我错过了什么。我很困惑。

****还有一个重要的注意事项

我应该在最初发布时提到，如果我取消注释，console.log("ROW2::", img);我会看到那些反映我获取的新数据的控制台日志。我发现这真的很奇怪，这不是在 android 模拟器中呈现新的数据表项目，因为显然这些项目正在被映射。在本机反应和模拟器中渲染有什么特别之处，也许我不知道。我觉得这肯定会出现在 React Web 应用程序中。

标签： reactjsreact-nativefetchreact-native-android

reactjs - React Native Component 不会随着状态变化而更新

问题描述

解决方案

推荐阅读