如何检查对象是否包含字符串值?

时间:2020-04-19 14:04:12

标签: javascript arrays json reactjs

我知道可以随着h标签的填充而读取对象内部的值,但是即使我的console.log显示确实存在,我也无法敲击检查response.image的值。

我不确定下面是否是检查值的正确语义。我想我可能需要在return语句之前执行此操作。击中response.result.image很好,但是我想是因为我没有像上面的其他2条语句那样检查字符串值。

enter image description here

import React from 'react';
import getResponse from '../Handler/getResponse.jsx';
import Spinner from '../Spinner/Spinner.jsx';

import './Modal.css';

 const Modal = ({close, item}) => {
    const response = getResponse(item);
    console.log(response);

    return (
        <div>
           {response === null &&(<Spinner/>)}
            {response &&(
                <div className='modal'>
                <div className='popup'>
                    <h1>{response.result.name}</h1>
                    <h5>{response.result.description}</h5>
                    {(response.image === "Error") &&(
                        <p className="text">{response.result.detailedDescription.articleBody}</p>
                    )}
                   {response.image && (response.image !== "Error") &&(
                     <div className="container">
                                <div className="left">{response.result.detailedDescription.articleBody}</div>
                        <div className="right"><img className="image" alt="image" src={response.image}/></div>
                     </div>
                   )}
                   {response.result.image &&(
                     <div className="container">
                        <div className="left">{response.result.detailedDescription.articleBody}</div>
                        <div className="right"><img className="image" alt="image" src={response.result.image.contentUrl}/></div>
                     </div>
                   )}
                   <button onClick={ () => { close(false) }}>close me</button>
                </div>
              </div>
            )}
        </div>
   );
}

export default Modal;

1 个答案:

答案 0 :(得分:0)

您可以尝试一下吗,我认为您忘记了响应中的数据键,但是由于我没有getResponse()函数,因此无法确定吗?

import React from 'react';
import getResponse from '../Handler/getResponse.jsx';
import Spinner from '../Spinner/Spinner.jsx';

import './Modal.css';

 const Modal = ({close, item}) => {
    const r = getResponse(item);
    const response = r.data;

    console.log(response);


    // You can check if it is string with this one;
   if (typeof response.image === 'String' && response.image !== '') {
     console.log('String exists and is not empty')
   }

    return (
        <div>
           {response === null &&(<Spinner/>)}
            {response &&(
                <div className='modal'>
                <div className='popup'>
                    <h1>{response.result.name}</h1>
                    <h5>{response.result.description}</h5>
                    {(response.image === "Error") &&(
                        <p className="text">{response.result.detailedDescription.articleBody}</p>
                    )}
                   {response.image && (response.image !== "Error") &&(
                     <div className="container">
                                <div className="left">{response.result.detailedDescription.articleBody}</div>
                        <div className="right"><img className="image" alt="image" src={response.image}/></div>
                     </div>
                   )}
                   {response.result.image &&(
                     <div className="container">
                        <div className="left">{response.result.detailedDescription.articleBody}</div>
                        <div className="right"><img className="image" alt="image" src={response.result.image.contentUrl}/></div>
                     </div>
                   )}
                   <button onClick={ () => { close(false) }}>close me</button>
                </div>
              </div>
            )}
        </div>
   );
}

export default Modal;