Reactjs 道具未定义，但我可以看到它正在记录道具

我还不知道该怎么做，我正在尝试将更多信息加载到记录数组中，只有当用户开始向下滚动时。问题是新信息出现在数组中，但如果您尝试调用它，它将返回

未定义的

。我在这里不明白什么

父组件：

class ComplementSection extends Component {
  constructor(props) {
    super(props)

    this.state = {
      complements: '',
      updatingComplements: false
    }
    this.updateComplementsArray = this.updateComplementsArray.bind(this)
  }


  componentWillMount() {
    let complements = this.props.user.complements
    let groupComplements = this.props.user.groupComplements
    let allComplements = [...complements, ...groupComplements]
    allComplements.sort(function compare(a, b) {
      dateA = new Date(a.created_at)
      dateB = new Date(b.created_at)
      return dateB - dateA
    })
    this.setState({
      complements: allComplements
    })
  }

  updateComplementsArray() {
    this.state.complements.map((complement, index) => {
      let complements = this.state.complements
      if(complement.meeting_id) {
        meetingApiHelper.getMeeting(this.props.currentUser.authToken, complement.meeting_id)
        .then(results => {
          complements[index].meeting = results.data.data;
          this.setState({complements: complements});
        })
        .catch(err => {
          console.log(err.response)
        })
      }
    })
    this.setState({
      updatingComplements: true
    })
  }

  componentDidUpdate() {
    if(this.props.scrolling === true && this.state.updatingComplements === false) {
      this.updateComplementsArray()
    }
  }



  render() {
    if(this.props.scrolling === true && this.state.updatingComplements === true){
      return(
        <View>
            <Text style={profileStyles.yellowLobsterHeader}>Complements</Text>
            <FlatList
              data={this.state.complements}
              renderItem={({item}) => <ComplementItem key={item.id}  item={item} navigation={this.props.navigation}  />}
              keyExtractor={(item, index) => index}
            />
        </View>
      )
    } else {
      return null
    }
  }
}

export default ComplementSection

但是

this.props.item.meeting

返回

未定义

---

我在这里遗漏了什么？？？

这里有两个问题

弗斯特 你不应该改变状态

let complements = this.state.complements
complements[index].meeting = results.data.data; //... Here, you should either use a spread to shallow compare or use tradition JS fix JSON.parse(JSON.stringify(your_obj)) for a deep clone

第二 一旦api获取成功，您无需在每个映射迭代上更新

状态

，这可能会导致性能问题

因此，在这种情况下，您可以使用

async/await

updateComplementsArray = async () => {
    const updatedCompliments = await Promise.all(
      this.state.complements.map(async (complement, index) => {
        if(complement.meeting_id) {
          try {
            const meetingResults = await meetingApiHelper.getMeeting(this.props.currentUser.authToken, complement.meeting_id)
            complement.meeting = meetingResults.data.data;
          } catch(ex) {
            // handle the api exception here
          }
        }
        return complement // Map expects a return for each iteration. Return the updated complement object here
      })
    )
    // Once the Promises inside map finish executing, update the state
    this.setState({ complements: updatedCompliments });
  }

---

您可以在这里为

项添加字符串化的JSON响应吗？上面的代码看起来不像是正确的JSON，上面的代码就是console.logging。为什么看起来不正确？json键需要引号吗？{“id”：“219”，“requestor_id”：“441”，“requestee_id”：“32”，“lang_one_id”：“1”，“lang_two_id”：“6”，…}此响应中的每个键值对后都缺少
，
键，因此非常感谢。这是一个很好的答案，解释得很好。
let complements = this.state.complements
complements[index].meeting = results.data.data; //... Here, you should either use a spread to shallow compare or use tradition JS fix JSON.parse(JSON.stringify(your_obj)) for a deep clone

updateComplementsArray = async () => {
    const updatedCompliments = await Promise.all(
      this.state.complements.map(async (complement, index) => {
        if(complement.meeting_id) {
          try {
            const meetingResults = await meetingApiHelper.getMeeting(this.props.currentUser.authToken, complement.meeting_id)
            complement.meeting = meetingResults.data.data;
          } catch(ex) {
            // handle the api exception here
          }
        }
        return complement // Map expects a return for each iteration. Return the updated complement object here
      })
    )
    // Once the Promises inside map finish executing, update the state
    this.setState({ complements: updatedCompliments });
  }