Reactjs 响应本机组件不随状态更改而更新

因此，我做了很多web开发工作。不是很多，但这对我来说真的很疯狂。我有这个组件

相关代码

 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>
    );
  };
}

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

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

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

****还有一点很重要

---

我应该在最初发布时提到，如果我取消注释

console.log（“ROW2:：”，img）我看到了那些控制台日志，这些日志反映了我获取的新数据。我觉得很奇怪，android emulator中没有呈现新的datatable项，因为这些项显然是映射的。在react native和Emulator中渲染是否有一些特殊的地方我可能还不知道。我觉得这肯定会出现在React Web应用程序中
 我拆下了部件，它工作了。我确实在组件中看到了其他一些带有setState问题的帖子。也许是我怎么用的，不确定。这只是一个证据，所以我试着很快把所有的东西组合起来。不管怎样，我想如果有人回来，我会发帖的
 事实上，您的父组件正在重新查找，因为您看到了“ROWS:：”日志，但是DataTable子组件实际上正在重新查找吗？注释中有一个“console.log”（“ROW2:：”，img）；”语句；当状态改变时，您是否真的看到这些被记录？有可能DataTable类似于FlatLlist，在这种情况下不会触发重新渲染器我看到那些控制台日志，它们反映了我获取的新数据。我发现在emulator中没有呈现这一点非常奇怪，因为很明显，我正在获取控制台日志，代码正在运行，似乎它应该呈现。这是一个完美的例子，说明为什么使用数组索引作为react键不起作用，对象已更新，但键保持不变，因此react会在重新呈现时停止。尝试使用元素唯一的键，如
key={row.email}
或
key={row.name}
，任何可以在数据更新之间提供新的唯一键的东西。我使用索引是因为我无法在数组中看到另一个唯一值。也就是说，我尝试了这个
，其中generateKey使用DateTime getTime，但它仍然没有在emulator中呈现带有行的表。我发现代码中仍然有示例中的DataTable.Pagination。你试着把它移走了吗？此外，最好缩小代码规模，从一个最小的示例开始。类似于on，它使用组件的状态来更新表行。您的样式表也可能是相关的，尤其是行样式。最好将此添加到您的帖子中。
console.log("AXRES1::",response)