时间戳

首页 > 解决方案 > 使用 React 找不到搜索时，我的代码显示错误

reactjs - 使用 React 找不到搜索时，我的代码显示错误

问题描述

请对使用 API 的 React 不熟悉，当找不到搜索对象时，它会返回错误！请帮我。我尝试过使用我知道的技术，但它不起作用。我需要做什么或添加以使其工作并在未返回搜索时返回非错误。

function Search() {
const[searchQuery, setSearchQuery] = useState('');
const[advices, setAdvices] = useState({ slips: [] });
const text = 'Tweet';
const shareText = 'Check https://adviser.surg.sh for more...';
const onInputChange = (e) => {
    setSearchQuery(e.target.value);
}

let API_URL = `https://api.adviceslip.com/advice/search/`;

const fetchAdvices = async () => {
    const result = await axios.get(`${API_URL}${searchQuery}`);
    console.log(result.data);
    setAdvices(result.data);
}

const onSubmitHandler = (e) => {
    e.preventDefault();
    fetchAdvices();
}

return (
    <div>
        
        <section>
            <form className='search-box' onSubmit={onSubmitHandler}>
                    <input
                     
                    type='search'
                    placeholder='Search for advice e.g love'
                    value={searchQuery}
                    onChange={onInputChange}
                    />
                    <button className='search-btn' type='submit'>Search</button>
            </form>
            <div className='adviceList'>
                {
                    advices.slips.map((advice, id) => {
                        return (
                            <div key={id}>
                                <div className='advice-card'>
                                    <h2>{advice.advice}</h2>
                                
                                   <p> <Twitter text={text} 
                                        url={advice.advice} 
                                        shareText={shareText} />
                                    </p>
                                </div>
                            </div>
                        );
                    })
                }
            </div>
        </section>

    </div>
)
 }

export default Search

我该如何解决这个问题，请帮助我做什么。

标签： reactjsapi

解决方案

而不是使用等待，试试这个；

const fetchAdvices = axios.get(`${API_URL}${searchQuery}`)
    .then(result => {
        console.log(result.data);
        setAdvices(result.data);
    }).catch(error => {
        console.log(error);
        // handleError(error);
    });

推荐阅读