Question

我知道这方面有很多文章，但是我认为我已经正确设置了我的reducer，并且状态返回了更新状态。

我的初始状态： callHistory: null,

我的redux减速器：

case CALL_HISTORY:
  return {
    ...state,
    callHistory: action.data,
    }

我的组件

const Dashboard = () => {

  const callHistory = useSelector(state => state.user.callHistory);
  console.log(callHistory); // logs the correctly updated state
  const ccId = getUserIdFromStorage(); // gets ccId using asyncStorage
  const [_, getDatabase] = useDatabase();

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

  const renderDatabase = () => {
    ccId.then(id => getDatabase(id));
  }

if (callHistory) { // Invariant Violation: Dashboard(...): Nothing was returned from render.
  return (
    <Text>
      Loading
    </Text>
    )
  }

getDatabase：

const getDatabase = ccId => {
    const docRef = db.collection("user").doc(ccId);
    docRef.get().then(doc => {
      if (doc.exists) {
        dispatch(callHistory(doc.data())); // correctly dispatches to store
      } else {
        console.log("No such document!");
      }
    }).catch(error => console.log("Error getting document:", error));
  }

非常感谢任何帮助或见解！

Answer 1

当callHistory为null时，您似乎没有其他条件。即使组件仅返回null，您的组件也必须返回某些内容。

添加类似这样的内容：

if (callHistory) {
  return (
    <Text>
      Loading
    </Text>
  )
} else {
  return null;
}

Redux不重新渲染组件

1 个答案: