在 React Native 中创建嵌套注释答案

【问题标题】：Creating nested comments in React Native在 React Native 中创建嵌套注释
【发布时间】：2021-10-09 16:57:35
【问题描述】：

我正在开发一个带有嵌套评论部分的 React Native 项目。评论作为 JASON 数据获取并通过 FlatList 呈现。

export default App = () => {
  const [isLoading, setLoading] = useState(true);
  const [data, setData] = useState([]);

  const getQuestions = async () => {
    try {
      const response = await fetch('https://..../api/q/289');
      const json = await response.json();
      setData(json);
    } catch (error) {
      console.error(error);
    } finally {
      setLoading(false);
    }
  }

  useEffect(() => {
    getQuestions();
  }, []);


  const addCommentReply = () => {
    var newData = [
      {
        "qid": "540",
        "aid": "540",
        "content": "New Comment/Reply",
        "privacy": "true",
        "uid": "23",
        "name": "Jhone",
      },
    ];
    setData(data.concat(newData));
  }


  return (
    <Screen>
        <FlatList
          data={data}
          keyExtractor={({ qid }, index) => qid}
          renderItem={({ item }) => (
            <AppCommentReply content={item.content} uname={item.name} />
          )}
        />
      <CommentBox>
        <Button title="Add element" onPress={addCommentReply} />
      </CommentBox>
    </Screen>
  );
};

FlatList 是嵌套评论部分的正确方法吗？
使用 {addCommentReply} 我可以将 cmets 添加到主数组流中。但是当有人回复评论以呈现回复时，我正在考虑将该数据推送到数组中相应“qid”的下方。如何将数据推入数组中间？

【问题讨论】：

标签： javascript arrays reactjs json react-native

【解决方案1】：

扩展运算符有助于将元素插入数组：

function insert(arr, index, item) {
  return [
      ...arr.slice(0, index),
      item,
      ...arr.slice(index)
 ];
};

【讨论】：