React调用API返回结果控制台可查看但页面无法渲染问题

• 对API返回结构的类型判断错误：shrtco.de短链接口返回的单条结果是对象类型，不存在length属性，原有代码中results.length > 0的判断永远为假，对应渲染逻辑不会触发。
• 字段取值路径错误：接口返回的短链存放在result.result.full_short_link路径下，原有代码写的item.results.result.full_short_link路径不存在，就算能进入遍历逻辑也拿不到值。
• 错误状态判断逻辑不准确：接口返回的ok字段为布尔类型，成功时是true，失败时是false，原有代码results.ok === 0只能匹配部分错误场景，覆盖不全。

单条结果展示（仅展示最新生成的短链） #

直接修改renderResult函数的逻辑即可，修改后的完整代码如下：

import React, { useState } from 'react'

const SearchArea = () => {
  const [input,setInput] = useState("");   
  const [results,setResults] = useState(null)

  const onInputChange = (ev) => {
    setInput(ev.target.value)
  }

  const onSearch = () => {
    fetch(`https://api.shrtco.de/v2/shorten?url=${input}`)
    .then(r=>r.json())
    .then(result=>{ 
        setResults(result) ;
        console.log(result.result.full_short_link)
    })
  }

  const onKeyDown= (ev) =>{
    if(ev.keyCode === 13){
        onSearch();
    }
  }

  const renderResult = () => {
    // 还未请求接口直接返回空
    if(!results) return null
    // 接口请求失败的情况
    if(!results.ok){
        return <div>短链生成失败，请检查输入链接是否合法</div>
    }
    // 接口请求成功，直接返回短链
    return <div>{results.result.full_short_link}</div>
  }

  return (
    <div>
        <div className="search-bar">
            <input type="text" onKeyDown={onKeyDown}  onChange={onInputChange} value={input} className="searching" placeholder="Shorten a link here..."></input>
            <button className="short-butt" onClick={onSearch}>Shorten It!</button>
            <div>{renderResult()}</div>
        </div>
    </div>
  )
}

export default SearchArea

多条结果展示（保留所有历史生成的短链） #

如果需要保留每次生成的短链记录，可修改state的类型为数组，调整如下：

1. 初始化state改为数组：

const [results,setResults] = useState([])

2. 接口请求成功时追加新结果到数组：

.then(result=>{ 
  setResults(prev => [...prev, result])
})

3. 修改renderResult的渲染逻辑：

const renderResult = () => {
  if(results.length === 0) return null
  return <div>
    {results.map((item, index)=> 
      <div key={index}>
        {item.ok ? item.result.full_short_link : '该条短链生成失败'}
      </div>
    )}
  </div>
}

内容的提问来源于stack exchange，提问作者Kapil Khatri