商品列表未显示答案

【问题标题】：List of products did not display商品列表未显示
【发布时间】：2021-10-30 01:59:40
【问题描述】：

我明白了：

store.js

import {productListReducer,productDetailsReducer,} from './reducers/productReducers'
const reducer = combineReducers({ productList: productListReducer, productDetails: productDetailsReducer,})

const initialState = {}
const middleware = [thunk]
const store = createStore(
  reducer,
  initialState,
  composeWithDevTools(applyMiddleware(...middleware))
)

export default store

productListReducer.js

export const productListReducer = (state = { products: [] }, action) => {
  switch (action.type) {
    case PRODUCT_LIST_REQUEST:
      return { loading: true, products: [] }
    case PRODUCT_LIST_SUCCESS:
      return {
        loading: false,
        products: action.payload.products,
        pages: action.payload.pages,
        page: action.payload.page,
      }
    case PRODUCT_LIST_FAIL:
      return { loading: false, error: action.payload }
    default:
      return state
  }
}

productActions.js

export const listProducts = (keyword = '', pageNumber = '') => async (
  dispatch
) => {
  try {
    dispatch({ type: PRODUCT_LIST_REQUEST })

    const { data } = await axios.get(
      `/api/products?keyword=${keyword}&pageNumber=${pageNumber}`
    )

    console.log(data) //data has items

    dispatch({
      type: PRODUCT_LIST_SUCCESS,
      payload: data,
    })
  } catch (error) {
    dispatch({
      type: PRODUCT_LIST_FAIL,
      payload:
        error.response && error.response.data.message
          ? error.response.data.message
          : error.message,
    })
  }
}

HomeScreen.js

import { listProducts } from '../action/productActions'

const HomeScreen = ({match}) => {

  const keyword = match.params.keyword
  const pageNumber = match.params.pageNumber || 1
  const dispatch = useDispatch()

  const productList = useSelector((state) => state.productList)
  const { loading, error, products, page, pages } = productList

  useEffect(() => {
    dispatch(listProducts(keyword, pageNumber))

    console.log(productList) //empty
    console.log(products) //empty

  }, [dispatch, keyword, pageNumber])

我看到我的数据可以正常获取（productActions.js)，但是我没有看到任何products into HomeScreen.js

--添加 HomeScreen.js => 返回

  return (
    <>
      <h1>Latest Products</h1>
      {loading ? (
        <Loader />
      ) : error ? (
        <Message variant='danger'>{error}</Message>
      ) : (
        <>
          <Row>
            {products > 0 && products.map((product) => (
              <Col key={product._id} sm={12} md={6} lg={4} xl={3}>
                <Product product={product} />
              </Col>
            ))}
          </Row>
        </>
      )}
    </>
  )

--更新 => index.js

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
);

---Redux 进入PRODUCT_LIST_SUCCESS我看到payload有数据，不知怎的，它没有通过......

有时也会显示： GET http://localhost:3000/api/products 500 (Internal Server Error)

---来自PRODUCT_LIST_REQUEST & PRODUCT_LIST_SUCCESS的日志

-动作-

-状态-

===开发工具/网络

当我看到“网络”选项卡时，如下所示：

另外，在“响应”选项卡中，我看到了我的数据

--预览

--响应

【问题讨论】：

在调用dispatch 后立即记录productList 和products 将记录旧值。组件在重新渲染之前无法看到更新的状态。使用 useEffect 挂钩记录更新的值：useEffect(() => { console.log(productList, products); }, [productList, productst])
检查了这个：{products: Array(0)}products: [][[Prototype]]: Object []
如何在HomeScreen 中渲染products？
更新我的问题（把我的回报放在那里）
您是否在应用的根目录中包含了 Redux Provider？

标签： reactjs redux react-redux react-hooks use-effect

【解决方案1】：

问题就在这里：

            {products > 0 && products.map((product) => (

将其编辑为 products.length > 0 && ...

【讨论】：

TypeError: Cannot read properties of undefined (reading 'length') - 我认为它是数组，我们无法检查长度

【解决方案2】：

还不能评论，但试试products?.length &&

请务必在未定义时处理要显示的内容。

【讨论】：

没有错误，仍然是array products it's empty，只有这个进入日志：React Hook useEffect has missing dependencies: 'productList' and 'products'. Either include them or remove the dependency array react-hooks/exhaustive-deps
我有一种预感，您在减速器中设置状态的方式会导致问题。在您的 store.js 中，初始状态包括 products: [] 然后，在您的减速器中 case PRODUCT_LIST_REQUEST: return { ...state, loading: true } 您也可以在减速器中删除 {products: []} 的默认状态参数。
抱歉没有帮助
在这里扔一个调试器，看看你的产品是什么... case PRODUCT_LIST_REQUEST: return { loading: true, products: [] }
这里.... case PRODUCT_LIST_SUCCESS: return { loading: false, products: action.payload.products, pages: action.payload.pages, page: action.payload.page, }跨度>

【解决方案3】：

这个

 products > 0 && products.map

到

 products?.map

【讨论】：

{loading: false, products: undefined} 和GET http://localhost:3000/api/products 500 (Internal Server Error)......
proxy error: Could not proxy request /api/products from localhost:3000 to http://127.0.0.1:5000. [1] See https://nodejs.org/api/errors.html#errors_common_system_errors for more information (ECONNREFUSED).
@4est please update your package.json 和 "proxy": "http://127.0.0.1:5000"
也知道了：/
不，当我将Network 选项卡检查到 Inspect/GoogleChrome 时，我看到名称 products 包含：Headers = 确定，Previes = 有项目，我将把它添加到我的问题中

【解决方案4】：

在没有多少帮助的情况下，我解决了我的问题。所以问题是"productReducers.js"，我试图通过products: action.payload.products，这是错误的。应该只是products: action.payload

这是正确的代码：

case PRODUCT_LIST_SUCCESS:
      return {
        loading: false,
        products: action.payload
      }

【讨论】：