无法从 firebase 读取属性 'reduce' 未定义数据

Question

我正在尝试 git 的 totalBalance 但我遇到错误 Cannot read 属性 'reduce' of undefined 同时我可以迭代组件的客户端代码如下

//redux and firebase
import { useSelector} from 'react-redux'
import { useFirestoreConnect, isLoaded, isEmpty} from 'react-redux-firebase'

const Clients = () => {

  useFirestoreConnect(["client"]) //the name of collection  on firebase

  const clients = useSelector((state) => state.firestore.ordered.client);

  const totalBalance = clients.reduce((acc,client)=>(acc + client.balance),0)
console.log(totalBalance);

  return (
    <div className="client">
      <div className="row client_head ">
      <div className="col">
      <FaUsers />
        <span className="ml-2">Clients</span>
      </div>
      <div className="col text-right">
      <span className="d-b">Total:  </span>
        <span className="ml-auto ">
        {clients.length===0?0:clients.reduce((acc,client)=>(acc + Number(client.balance),0))}
          </span>
      </div>
      </div>
      <div className="client_info row text-center">
          <table className="mt-3 w-100 table-bordered">
            <thead>
              <tr>
                <th>ID</th>
                <th>First Name</th>
                <th>Last Name</th>
                <th>Email</th>
                <th>balance</th>
                <th>Details</th>
              </tr>
            </thead>
            <tbody>
              {clients.map(client => 
                <tr key={client.id}>
                  <td className="p-3">3</td>
                  <td>{client.firstName}</td>
                  <td>{client.lastName}</td>
                  <td>{client.email}</td>
                  <td>{client.balance}</td>
                </tr>
              )}
            </tbody>
          </table>
        )}
      </div>
    </div>
  );
};
export default Clients

我认为问题是客户未定义，但我不知道原因

Answer 1

此错误告诉您您从 redux 选择的 clients 对象是 undefined。可能是它以 undefined 开始，然后异步填充数据，因此在第一次渲染时它会是 undefined，但之后就可以了。如果它继续保持 undefined，则说明您的代码中的其他地方存在问题。

有两种简单的方法可以处理可能尚不存在的数据。

您可以将 undefined 替换为空数组并正常渲染其余组件。您将有一个没有项目且余额为 0 的列表。

const clients = useSelector((state) => state.firestore.ordered.client) || [];

您可以停止渲染组件的其余部分。不渲染任何内容或渲染一些加载屏幕。

const clients = useSelector((state) => state.firestore.ordered.client);

if ( ! clients ) {
    return (<div>Loading...</div>);
}

// the rest of the component continues below

无法从 firebase 读取属性 'reduce' 未定义数据

Cannot read property 'reduce' of undefined data from firebase

javascript

firebase

reactjs

redux

react-redux-firebase

无法从 firebase 读取 属性 'reduce' 未定义数据

Cannot read property 'reduce' of undefined data from firebase

javascript

firebase

reactjs

redux

react-redux-firebase

无法从 firebase 读取属性 'reduce' 未定义数据