Question

我正在寻找一种方法，可以使用数组中的数据并一次显示一项。这是我的代码：

constructor(props) {
  super(props);
  this.state = {
    feed: [{
      username: ["Its_Jess: ", "Haro1d: "],
      caption: ["The New Photoshoot was so much fun!", "Had a great day at the beach"]
    }]
  }
}

renderFeed = () => {
    return this.state.feed.map((card, index) => {
      return (
        <Card>
          <Text key={index}>{card.username}</Text>
          <Text key={index}>{card.caption}</Text>
          </Card>
        )
    })
}

render() {
    return (
       <View>
          {this.renderFeed()}
       </View>
    );
}

我试图做的是让它具有

这样的模式

Its_Jess：新照片拍摄非常有趣！

。然后将此卡分开

Haro1d：在海滩度过了美好的一天

但是我得到的却是：

Its_Jess：Haro1d： New Photoshoot非常有趣！在沙滩上度过了愉快的一天

Answer 1

尝试这样。

注意：这是您的解决方案的教程。

const feed = [{
  username: ["Its_Jess: ", "Haro1d: "],
  caption: ["The New Photoshoot was so much fun!", "Had a great day at the beach"]
}];

const App = () => {
  return feed.map((card, index) => {
    return card.username.map((c, i) => {
      if(card.caption[i])
        return (
          <div key={index}>
            <span>{c}</span>
            <span>{card.caption[i]}</span>
          </div>
        );
    });
  })
}

ReactDOM.render(<App />, document.getElementById('app'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="app"></div>

这是您的解决方案。

问题：为什么要像${i}_${index}这样的键？
呈现Feed时，键就像索引一样。因此，每个组件应具有不同的键，因此我通过2个索引（i和index）来制作键。

  renderFeed = () => {
    return this.state.feed.map((card, index) => {
      return card.username.map((username, i) => {
        if (card.caption[i]) {
          return (
            <Card key={`${i}_${index}`}>
              <Text>{username}</Text>
              <Text>{card.caption[i]}</Text>
            </Card>
          );
        }
        return <React.Fragment />;
      });
    });
  };

从状态数组一一响应本机列表项

1 个答案: