Question

我正在构建一个post有comments的react native应用。我只想当用户单击comments时显示load comments...。问题是如何处理每个帖子（有多个帖子）的状态。我试过了这，但是不起作用（renderPost是一个循环）：

const renderPost = ({ item, index}) => {
    let fetchComments = false;

    return (
      <View style={[t.mB6]}>
        <View style={[t.roundedLg, t.overflowHidden, t.shadow, t.bgWhite, t.hAuto]}>

        <TouchableOpacity 
            key={item.id}
            onPress={() => {
              fetchComments = true;
            }}>
            <Text style={[t.fontBold, t.textBlack, t.mT2, t.mL4, t.w1_2]}>
                load comments...
              </Text>
          </TouchableOpacity>
        </View>

        { fetchComments ? <Comments postId={item.id}/> : null }
      </View>
    )
  }

在上面的代码中，当用户单击let fetchComments时，我将load comments...设置为true。

Answer 1

renderPost是一个没有自己的渲染和状态的功能组件，您可以通过在其父React.Component中通过renderPost道具传递改变状态的函数来解决此问题。

示例：

//imports

class FatherComponentWithState extends React.component{
  state={
    fetchComments:false,
    //(...OTHERSTUFFS)
    }

  setFetchComments = () =>{
    this.setState({fetchComments:true})
  }

  render(){
    return(
//(...FatherComponentStuffs)
      {new renderPost({
         setFetchComments: this.setFetchComments, 
         fetchComments:this.state.fetchComments,
         //(...renderPostOtherStuffs like item, index)
      })}
  //(...FatherComponentStuffs)
)}}

renderPost函数将通过以下方式接收它：

const renderPost = (props) =>{

let fetchComments = props.fetchComments;
let setFetchComments = props.setFetchComments;
let item = props.item
let index = props.index

//...renderPost return remains the same
}

PS：如果您有多个renderPost，则可以将fetchComments用作布尔数组，并通过将索引作为setFetchComments函数的参数来将状态设置为true。

反应本机更改状态循环

1 个答案: