Question

如何将在一定时间间隔后发生变化的映射数据作为props传递给另一个组件

        <View>
            {data.prices && data.prices.map((prices, index) => {
                return (
                    <ListItem
                        key={index}
                        onPress = {() => navigation.navigate('CreateAlertScreen',)}
                        bottomDivider>
                        <ListItem.Content>
                            <ListItem.Title>
                                {data.prices[index].instrument}        
                                {data.prices[index].closeoutAsk}        
                                {data.prices[index].closeoutBid}
                            </ListItem.Title>
                        </ListItem.Content>
                    </ListItem>
                )
            })
            }
        </View>

Answer 1

我认为您可以使用像这样的项目代替索引

        <View>
            {data.prices && data.prices.map((item, index) => {
                return (
                    <ListItem
                        key={index}
                        onPress = {() => navigation.navigate('CreateAlertScreen',)}
                        bottomDivider>
                        <ListItem.Content>
                            <ListItem.Title>
                                {item.instrument}        
                                {item.closeoutAsk}        
                                {item.closeoutBid}
                            </ListItem.Title>
                        </ListItem.Content>
                    </ListItem>
                )
            })
            }
        </View>

Answer 2

如果您这样编写代码，则可以轻松地将地图数据传递给另一个组件

function Price(props) {
  const { navigation, price } = props;
  
  return (
    <ListItem onClick={() => navigation.navigate("CreateAlertScreen")}>
      <ListItem.Content>
        <ListItem.Title>
          {price.instrument}
          {price.closeoutAsk}
          {price.closeoutBid}
        </ListItem.Title>
      </ListItem.Content>
    </ListItem>
  );
}

function App() {
  return (
    <View>
      {data.prices.map((price, i) => {
        // Simply return a component for each item of the map
        // So you can easily pass map data as props
        return <Price key={i} navigation={navigation} price={price} />;
      })}
    </View>
  );
}

点击该演示的codesandbox链接，它将起作用

https://codesandbox.io/s/passingmapdataascomponent-fptum?file=/src/App.js

如果需要的话，问我问题。

Answer 3

注意：如果您使用的是NodeJS的LTS版本，将无法使用无效的合并运算符，因为我在这里使用过它。您将必须找到一种解决方法，例如将a ?? b替换为a === null || a === undefined ? b : a。

class DataView extends React.Component {
  constructor(props) {
    super(props);
    this.prices = props.prices ?? [];
  }
  render() {
    return <View>
      {this.prices.map((item, index) => {
        return (
          <ListItem
            key={index}
            onPress = {() => navigation.navigate('CreateAlertScreen',)}
            bottomDivider={true}>
            <ListItem.Content>
              <ListItem.Title>
                {item.instrument}        
                {item.closeoutAsk}        
                {item.closeoutBid}
              </ListItem.Title>
            </ListItem.Content>
          </ListItem>
        )
      })}
    </View>;
  }
}

使用此代码，您可以执行以下操作：

<DataView prices={data.prices}/>

将映射的数据作为道具传递给另一个组件

3 个答案: