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

我如何将经过一定时间间隔后更改的映射数据作为道具传递给另一个组件

        <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>

{data.prices&&data.prices.map（（价格，指数）=>{
返回(
navigation.navigate（'CreateAlertScreen'，）}
底部分隔器>
{数据.价格[指数].仪器}
{data.prices[index].closeoutAsk}
{data.prices[index].closeoutBid}
)
})
}

我想你可以用这样的项目来代替索引

        <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>

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

{data.prices&&data.prices.map（（项目，索引）=>{
返回(
navigation.navigate（'CreateAlertScreen'，）}
底部分隔器>
{项目.文书}
{item.closeoutAsk}
{item.closeoutBid}
)
})
}

注意：如果您使用的是NodeJS的LTS版本，您将无法像我在这里使用的那样使用空合并操作符。你必须找到一个解决方法，比如replaceint

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

类数据视图扩展了React.Component{
建造师（道具）{
超级（道具）；
this.prices=props.prices？？？[]；
}
render（）{
回来
{this.prices.map（（项目，索引）=>{
返回(
navigation.navigate（'CreateAlertScreen'，）}
底部分隔符={true}>
{项目.文书}
{item.closeoutAsk}
{item.closeoutBid}
)
})}
;
}
}

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

<DataView prices={data.prices}/>

---

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

        <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>

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

功能价格（道具）{
const{navigation，price}=props；
返回(
导航。导航（“CreateAlertScreen”）}>
{price.instrument}
{price.closeoutAsk}
{price.closeoutBid}
);
}
函数App（）{
返回(
{data.prices.map（（price，i）=>{
//只需为地图的每个项目返回一个组件
//因此，您可以轻松地将地图数据作为道具传递
回来
})}
);
}

单击codesandbox链接，以演示此操作是否有效

---

如果需要，可以问我问题。

您所说的另一个组件是什么意思？请详细说明您的设置，以及您希望通过另一个组件将数据发送到哪个组件。我指的是需要使用该数据的另一个屏幕。例如：当所选股票达到某个价格时，为该股票创建AlertScreen。根据您更新价格和检查股票价格的设置（我不太清楚），您始终可以将数据发送到另一个屏幕，如

navigation.navigate（'CreateArtScreen'，prices）

item.instrument

worke是否可以将更改的数据传递到“CreateAlertScreen”，并让数据更改其在此屏幕中的更改方式它如何回答问题？是不是已经有同一个OP了？两个都有效。然后我如何将上面的动态数据作为道具传递给另一个组件呢？相反，我使用了一个模态，它工作得非常好。谢谢，我不认为导航应该是道具。它感觉更像是一个全球性的东西。@是的，它可能是导航不是道具。但为了模拟或再现问题，它仍然有效。