Reactjs 错误：“createDraft”的第一个参数必须是普通对象、数组或不可数对象

Home.js

这是到repo的链接：

model.js

import React, { useState, useEffect } from 'react'
import './HomeCss.css'
import { Card, Button, Container, Row, } from 'react-bootstrap'
import Axios from 'axios'
import { useStoreActions, useStoreState } from 'easy-peasy'

const Layout = () => {
  const [items, setItmes] = useState([])
  const count = useStoreState(state => state.count)
  const add = useStoreActions(actions => actions.add)

  useEffect(() => {
    Axios.get('http://localhost:3000/products')
      .then(res => {
        setItmes(res.data)
      })
      .catch(err => {
        console.log(err)
      })
  })


  function displayCard() {
    if (!items.length) return null

    return items.map((item, index) => (
      <Card style={{
        width: '21rem',
        marginRight: "7px",
        marginLeft: '7px',
        marginBottom: '13px',
        display: 'flex',
        alignItems: 'center'
      }}>
        <Card.Img variant="top" src={item.url} />
        <Card.Body>
          <Card.Title>{item.title}</Card.Title>
          <Card.Text>
            {item.description}
          </Card.Text>
          <Button variant="primary"
            onClick={() => add()}
          >
            Buy Now
              </Button>
        </Card.Body>
      </Card>
    ))
  }

  console.log(count)

  return (
    <div>
      <Container><Row>{displayCard()}</Row></Container>
    </div>
  )
}

export default Layout

import { action } from "easy-peasy";

export default {
    count: 0,
    add: action((state, id) => {
        return state.count + 1
    })
};

错误来自伊默。Immer允许您使用命令式API，应该修改如下值

state.count+=1

，而不是在上面的

model.js

文件中返回新值

return state.count+1

。

model.js

import React, { useState, useEffect } from 'react'
import './HomeCss.css'
import { Card, Button, Container, Row, } from 'react-bootstrap'
import Axios from 'axios'
import { useStoreActions, useStoreState } from 'easy-peasy'

const Layout = () => {
  const [items, setItmes] = useState([])
  const count = useStoreState(state => state.count)
  const add = useStoreActions(actions => actions.add)

  useEffect(() => {
    Axios.get('http://localhost:3000/products')
      .then(res => {
        setItmes(res.data)
      })
      .catch(err => {
        console.log(err)
      })
  })


  function displayCard() {
    if (!items.length) return null

    return items.map((item, index) => (
      <Card style={{
        width: '21rem',
        marginRight: "7px",
        marginLeft: '7px',
        marginBottom: '13px',
        display: 'flex',
        alignItems: 'center'
      }}>
        <Card.Img variant="top" src={item.url} />
        <Card.Body>
          <Card.Title>{item.title}</Card.Title>
          <Card.Text>
            {item.description}
          </Card.Text>
          <Button variant="primary"
            onClick={() => add()}
          >
            Buy Now
              </Button>
        </Card.Body>
      </Card>
    ))
  }

  console.log(count)

  return (
    <div>
      <Container><Row>{displayCard()}</Row></Container>
    </div>
  )
}

export default Layout

import { action } from "easy-peasy";

export default {
    count: 0,
    add: action((state, id) => {
        return state.count + 1
    })
};

---

错误来自伊默。Immer允许您使用命令式API，并且应该修改如下值

state.count+=1

，而不是在上面的

model.js

文件中返回一个新值

return state.count+1

。

堆栈溢出时，不建议使用仅代码的答案，因为它们没有解释如何解决问题。请编辑您的答案，以解释此代码的作用以及它如何回答问题，以便对具有类似问题的其他用户有用。对于堆栈溢出，不建议使用纯代码答案，因为它们不会解释此代码如何解决问题。请编辑您的答案，解释此代码的作用以及它如何回答问题，以便对其他有类似问题的用户有用。