从api接收数据时出现“未定义”问题[重复]答案

【问题标题】："Undefined" problem when receiving data from api [duplicate]从api接收数据时出现“未定义”问题[重复]
【发布时间】：2020-12-20 04:41:14
【问题描述】：

我正在通过 reactjs 改进自己。我正在尝试建立一个电子商务网站。我使用 Mock Api 作为服务。我可以在 ProductList.js 中列出我的数据。但我不能在 ProductDetails.js 中调用相同的数据。我收到“未定义”错误。

const ProductDetail = (props) => {
    const { buttonLabel, className } = props;
    const { name, description, price,id } = props;
    const axios = require('axios');

    const [modal, setModal] = useState(false);

    const toggle = () => setModal(!modal);
    const [dress, setDress] = useState([]);
    useEffect(() => {
        axios
            .get(`https://5fd9d76f6cf2e7001737ead3.mockapi.io/api/v1/dress`)
            .then(function (response) {
                setDress(response.data);
            })
            .catch(function (error) {
                console.log(error);
            });
    }, []);
    const data = dress.map(item => {
        return {    
            name: item.name,
            description: item.description,
            price:item.price,
            id: item.id       
        }
    })
        return (
            <div >
                <ProductDetailButton onClick={toggle}>Detay{buttonLabel}</ProductDetailButton>
                <Modal isOpen={modal} toggle={toggle} key={`${data.id}`} className={className}>
                    <ModalHeader toggle={toggle}>{`${data.name}`}</ModalHeader>
                    <ModalBody >
                    {`${data.price}`}
                    </ModalBody>
                    <ModalBody>
                    {`${data.description}`}
                    </ModalBody>
                    <ModalFooter>
                        <Button color="secondary" onClick={toggle}>
                            Kapat
                        </Button>
                    </ModalFooter>
                </Modal>
            </div>
        );

模态显示为输出。它说“未定义”而不是数据。如何解决？

【问题讨论】：

data 是一个对象数组，所以我怀疑您的问题是您没有将它视为返回的 JSX 中的数组

标签： javascript reactjs api undefined

【解决方案1】：

您的 api 返回一个对象数组，因此如果您有一个 ProductList，则不应在 Product Details 中进行 api 调用。您应该将这些项目作为道具传递。

示例。

const ProductList = () => {
       const [showProduct, setShowProduct] = useState(null)
 ..... api call and data...

return (
    <React.Fragment>
          {data?.map(item => <div>{item.name} <button onClick={() => setShowProduct(item)}> Show Item </button> </div> }

        { !!showProduct && <ProductDetails item={showProduct} onClose={() => setShowProduct(null) /> } //this will open up your modal

    </React.Fragment>
)

}

那么在您的产品详细信息中应该是这样的。

const ProductDetails = ({ item, onClose }) => {
//your item details accessible here via props

    return <Modal> <ModalBody> {item.name} </ModalBody><ModalFooter><Button onClick={onClose}>Close</ModalFooter></Modal>

}

【讨论】：

【解决方案2】：

通过查看您的代码const data 值将被更改。但重新渲染不会发生，因为它不在状态。另一个问题是data 是一个数组（map 返回一个数组）。为了像{data.name}这样调用，数据应该是一个对象。

将data 置于状态

useState(()=> {

    const data = Array.isArray(dress) && dress.map(item => {
        return {    
            name: item.name,
            description: item.description,
            price:item.price,
            id: item.id       
        }
    }
// set the state
setData(data);

}, [dress]);

【讨论】：