Question

我希望能够将当前用户从我的Comment组件传递到我的CommentList组件

class Comment extends Component {
    render() {
        return(
            <View>
                <Header
                    rounded
                    style={{
                        backgroundColor: '#ffffff',
                        position: 'relative',
                    }}
                >
                    <View style={{flexDirection: 'row', flexWrap: 'wrap', right: '43%', top: '50%'}}>
                        <Icon name='chevron-left' size={10} color='#006FFF' style={{top: '6%'}}/>
                        <NativeText
                            onPress={() => this.props.history.push('/')}
                            style ={{color: '#006FFF', fontSize: 12, fontFamily: 'Montserrat-Regular'}}
                        >
                            Back
                        </NativeText>
                    </View>
                </Header>
                <View
                    style={{paddingLeft: '2%', paddingTop: '2%'}}
                >
                    <CommentList

                        options={this.props.location.state.comments}
                        currentUser={this.props.location.state.currentUser}
                    />
                </View>
            </View>
        )
    }
}

export default withRouter(Comment)

const CommentList = (options, currentUser) => {
    const [modalVisible, setModalVisible] = useState(false)
    const [parentId, changeParentId] = useState('')
    const [commentInput, changeComment] = useState('')

    return ( 
      <View>{console.log(currentUser)}
          {options.options.map(option => (
              <View>
                <NativeText
                    style={{fontSize: 12, fontFamily: 'Montserrat-Regular'}}
                >
                    {option.content}
                </NativeText>
                <Icon
                    name='reply'
                    size={12}
                    onPress={() => {
                        setModalVisible(true)
                        changeParentId(option._id)
                    }}
                />
                { 
                <View
                    style={{left: '10%'}}
                >
                    <CommentList
                        options={option.reply}
                    />
                </View>
                }
            </View>
          ))}
      </View>
    )
}

当我尝试将其传递给currentUser时，它返回一个空对象； options确实出现在CommentList中。

Answer 1

您缺少CommentList的对象分解语法。应该如下：

const CommentList = ({ options, currentUser }) => {
    // component content
}

Answer 2

传递给功能组件的道具被合并为一个对象。因此，您需要解构这些值。

或者

    const CommentList = (props) => {
       //props.options //props.currentUser
     }

无法使子钩子接收状态

2 个答案: