Question

我正在用 firestore 做我的钩子。我在另一个页面上做了完全相同的事情，他工作了。但是这个我有错误：对象作为 React 子对象无效（找到：带有键 {_U、_V、_W、_X} 的对象）。如果您打算渲染一组子项，请改用数组。

在我的控制台上，我可以看到一个像这样的空数组

cc []

也是我的钩子

async function GetFriendsRequest() {
  const [TeamsArray, updateTeamArray] = React.useState([]);

  firestore()
    .collection("Teams")
    // Filter results
    .where("uid", "==", await AsyncStorage.getItem("userID"))
    .get()
    .then((querySnapshot) => {
      if (querySnapshot.empty) {
        console.log("no documents found");
      } else {
        querySnapshot.forEach(async (doc) => {
          let Teams = doc._data;
          TeamsArray.length = 0;
          updateTeamArray((arr) => [...arr, Teams]);

          console.log("cc", JSON.stringify(TeamsArray));
        });
      }
    });
  return (
    <View>
      {TeamsArray.map((element, key) => {
        <View style={{ flex: 1, flexDirection: "row" }}>
          <View>
            <Text style={{ color: "#5DC1D3" }}>
              {element.MembersList.nickName}
            </Text>
            <Text style={{ color: "#5DC1D3" }}>{element.Activity} </Text>
          </View>
        </View>;
      })}
    </View>
  );
}

有什么不对吗？

Answer 1

您的 .map() 回调没有返回任何内容。您需要将回调主体中的大括号替换为括号以返回您的 JSX：

{TeamsArray.map((element, key) => (
        <View style={{ flex: 1, flexDirection: "row" }}>
          <View>
            <Text style={{ color: "#5DC1D3" }}>
              {element.MembersList.nickName}
            </Text>
            <Text style={{ color: "#5DC1D3" }}>{element.Activity} </Text>
          </View>
        </View>;
))}

Answer 2

您的组件中存在一些错误，您必须在调试前先修复这些错误。


// This is a component, not a hook, so use it like <GetFriendsRequest />
async function GetFriendsRequest() {
  const [TeamsArray, updateTeamArray] = React.useState([]);

  // This code was in the render loop
  // put it inside a function so it doesn't run on every single render
  const init = async () => {
    const uid = await AsyncStorage.getItem("userID");

    firestore()
      .collection("Teams")
      // Filter results
      .where("uid", "==", uid)
      .get()
      .then((querySnapshot) => {
        if (querySnapshot.empty) {
          console.log("no documents found");
        } else {
          const results = [];
          querySnapshot.forEach(async (doc) => {
            let Teams = doc.data();
            // Don't mutate react state, it should be treated as immutable
            // TeamsArray.length = 0;

            // This is an async function, but it's being
            // called as if it were syncronous
            // updateTeamArray((arr) => [...arr, Teams]);
            results.push(Teams);
          });

          // Schedule a single state update
          updateTeamArray([...results, ...TeamsArray]);
        }
      });
  }

  // Use an expression like this to debug
  useEffect(() => {
    // Log state every time it updates
    console.log(TeamsArray);
  }, [TeamsArray]);

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

  return (
    <View>
      {TeamsArray.map((element, key) => {
        // Something has to be returned from this map
        return <View style={{ flex: 1, flexDirection: "row" }}>
          <View>
            <Text style={{ color: "#5DC1D3" }}>
              {element.MembersList.nickName}
            </Text>
            <Text style={{ color: "#5DC1D3" }}>{element.Activity} </Text>
          </View>
        </View>;
      })}
    </View>
  );
};

如何让我的钩子有效？对象作为反应孩子无效

2 个答案: