如何在构造函数中访问 This.props.route.params

Question

我的第一页将包含一些数据的数组推送到下一页，我想在 RenderItem 中使用该数据作为平面列表。我尝试了绑定事件，但它对我也不起作用，任何帮助都会得到帮助。

enter code here
导出默认类 mainPage 扩展 React.Component {

  constructor(props: any) {
    super(props)
    this.state = {
      text: '',
      slots: [],
      screen: 'screen1',
      vehicleNumber: '',
      parkingLot: [],
      selectedSlot: '',
    }
  }

  createSlot() {
    let tempdata: any[] = []
    for (let i = 0; i < parseInt(this.state.text); i++) {
      tempdata.push({
        allocated: false,
        timestamp: new Date(),
      })
    }
    this.setState(
      {
        slots: [
          ...this.state.slots,
          {
            id: (Math.random() + 1).toString(36).substring(7),
            count: parseInt(this.state.text),
            data: tempdata,
          },
        ],
        text: '',
        screen: 'screen2',
      },
      () => {
        this.props.navigation.navigate('floor', {
          slots: this.state.slots,
        })
      },
    )
  }
  // componentDidMount() {

  //   this.setState({ parkingLot: [...this.parkingLot] })

  // }
  park = () => {
    console.log('jcjhj', this.state.parkingLot)
    var item = this.state.slots[
      Math.floor(Math.random() * this.state.slots.length)
    ]
    console.log('Parkinglot', this.state.parkingLot, item)
    console.log('Slots', this.state.slots)
    if (this.state.slots) {
    }

    // this.setState({
    //   parkingLot: [
    //     ...this.state.parkingLot,
    //     { carnumber: this.state.vehicleNumber },
    //   ],
    // })
  }
  renderItem(item: any) {
    return (
      <TouchableOpacity
        style={styles.Slotinput}
        onPress={() =>
          this.setState({ screen: 'screen3', selectedSlot: item.id })
        }
      >
        <Text style={{ fontSize: 12, color: 'white', fontWeight: 'bold' }}>
          Slot ID:-{item.id}
        </Text>
        <Text style={{ fontSize: 12, color: 'white', fontWeight: 'bold' }}>
          Slot Count:-{item.count}
        </Text>
      </TouchableOpacity>
    )
  }
  renderItem1(item: any) {
    return (
      <View style={styles.Slotinput}>
        <Text>{item.allocated ? 'Allocated' : 'Available'}</Text>
        {this.state.parkingLot.map((e: any) => {
          return <Text>{e.carnumber}</Text>
        })}
      </View>
    )
    //   )
    // }
    // return demo
  }

  render() {
    return (
      <View>
        {this.state.screen === 'screen1' && (
          <View style={styles.form}>
            <TextInput
              style={styles.input}
              placeholder="Enter A value for slot"
              onChangeText={(text: any) => this.setState({ text })}
              value={this.state.text}
            />
            <TouchableOpacity
              style={
                this.state.text && this.state.text
                  ? styles.addItemButton
                  : styles.BlurItemButton
              }
              disabled={this.state.text == ''}
              onPress={() => this.createSlot()}
            >
              <Text style={styles.buttonText}>Submit</Text>
            </TouchableOpacity>
          </View>
        )}
        {/* {this.state.screen === 'screen2' && (
          <>
            <Text onPress={() => this.setState({ screen: 'screen1' })}>
              Back
            </Text>
            <FlatList
              data={this.state.slots}
              renderItem={({ item }) => this.renderItem(item)}
              keyExtractor={(item) => item.id}
            />
          </>
        )} */}
        {/* {this.state.screen === 'screen3' && (
          <>
            <Text onPress={() => this.setState({ screen: 'screen2' })}>
              Back
            </Text>
            <>
              {}
              <TextInput
                placeholder="Vechicle Number"
                style={styles.input}
                value={this.state.vehicleNumber}
                onChangeText={(vehicleNumber: any) =>
                  this.setState({ vehicleNumber })
                }
                // onChangeText={data => this.setState({ vehicleNumber: data })}
              ></TextInput>
            </>

            <TouchableOpacity
              style={styles.addItemButton}
              onPress={() => this.park()}
            >
              <Text>Park Vechicle</Text>
            </TouchableOpacity>

            {this.state.slots
              ?.filter((i: any) => i.id === this.state.selectedSlot)
              ?.map((item: any, index: number) => {
                return (
                  <View key={index}>
                    <FlatList
                      data={item.data}
                      renderItem={({ item }) => this.renderItem1(item)}
                      keyExtractor={(item, index) => index.toString()}
                    />
                  </View>
                )
              })}
          </>
        )} */}
      </View>
    )
  }
}

Here is my floor.tsx page(next page)

在此处输入代码 export default class floor extends Component { 把手槽：任意 构造函数（道具：任何）{ 超级（道具） // console.log('SLOTDATA::--', props.route.params)

    this.state = {
      text: '',
      slots: [],
      screen: 'screen1',

      selectedSlot: '',
    }
    // let slo: Array<any> = this.props.route.params
    // console.log('propdata-->', slo)
    // this.setState({
    //   slo: [],
    // })
  }

  renderItem=(item: any)=> {
    console.log('item', item)

    return (
      <TouchableOpacity
        style={styles.Slotinput}
        onPress={() =>
          this.setState({ screen: 'screen3', selectedSlot: item.id })
        }
      >
        <Text style={{ fontSize: 12, color: 'white', fontWeight: 'bold' }}>
          Slot ID:-{item.id}
        </Text>
        <Text style={{ fontSize: 12, color: 'white', fontWeight: 'bold' }}>
          Slot Count:-{item.count}
        </Text>
      </TouchableOpacity>
    )
  }
  render() {
    return (
      <View>
        <Text onPress={() => this.props.navigation.goBack()}>Back</Text>

        <FlatList
          data={this.props.route.params}
          renderItem={({ item }) => 
          this.renderItem(item)}
          keyExtractor={(item) => item.id}
        />
      </View>
    )
  }
}

Answer 1

您的问题是您没有选择要在平面列表中传递的正确数据。 this.props.route.params.slots 将为您提供您从上一个屏幕传递的插槽。试试这个

  <FlatList
          data={this.props.route.params.slots}
          renderItem={({ item }) => 
          this.renderItem(item)}
          keyExtractor={(item) => item.id}
        />