使用 JSX 映射单个数组中的对象答案

【问题标题】：Map though an object inside a single array using JSX使用 JSX 映射单个数组中的对象
【发布时间】：2021-09-04 21:54:20
【问题描述】：

所以我有一个对象，它有一个嵌套的对象列表，即“贷款”

{
    "cid": 1,
    "fname": "test fnamne",
    "mname": "test mname",
    "lname": "test lane",
    "address": "test address",
    "gender": "Male",
    "sourceOfFund": "work",
    "coMaker": null,
    "contactNumber": "09382853287432",
    "loans": [
        {
            "id": 1,
            "location": 1,
            "area": 100,
            "pricePerArea": 4000,
            "interest": 16,
            "term": 24,
            "downPayment": 20000,
            "dppurpose": 1
        }
    ]
}

如何在 react 中使用 jsx 代码有效地映射贷款对象？我目前有这个代码：

  function DataFetching() {

    const [customer, setCustomer] = useState({})
    const [id, setId] = useState(1)
    const [idFromButtonClick, setIdFromButtonClick] = useState(1)

    const handleClick = () => {
        setIdFromButtonClick(id)
    }

    useEffect(() => {
        axios 
            .post(`http://localhost:9090/api/customer/getCustomerByCid`,{cid:idFromButtonClick})
            .then(res => {
                console.log(res)
                setCustomer(res.data)
            })
            .catch(err => {
                console.log(err)
            })
    }, [idFromButtonClick])
    return (
        <div>
            <input type='text' value={id} onChange={e => setId(e.target.value)}/>
            <button type='button' onClick={handleClick}>Fetch Post</button> <br></br><br></br>
            
           { customer.loans.map(item => (<li key={item.id}>{item.area}</li>))}
           
        </div>
    )
}

这给了我一个错误“无法读取未定义的属性'map'” 任何帮助将不胜感激。

【问题讨论】：

试试这个方法 -->> { (customer?.loans || []).map(item => (<li key={item.id}>{item.area}</li>))}

标签： reactjs react-hooks jsx use-state

【解决方案1】：

您的代码基本上是正确的，但是存在一个逻辑缺陷 - 在第一个组件渲染中，customer 将等于您设置的默认值 ({})。

在这种情况下，customer.loans 不存在，因为customer 是一个空对象。

我建议将customer 的默认值设置为null：

const [customer, setCustomer] = useState(null);

然后在您的代码中，检查是否已获取客户 - 如果尚未获取，则可能显示加载微调器。

总而言之：

function DataFetching() {
  const [customer, setCustomer] = useState(null);
  // ...

  useEffect(() => {
    // ... fetch data
  }, [idFromButtonClick]);

  return (
    <div>
      <input type="text" value={id} onChange={(e) => setId(e.target.value)} />
      <button type="button" onClick={handleClick}>
        Fetch Post
      </button>
      <br></br>
      <br></br>
      {customer === null ? 'Loading...' : customer.loans.map((item) => (
        <li key={item.id}>{item.area}</li>
      ))}
    </div>
  );
}

【讨论】：

【解决方案2】：

最初 loans 和 customer 未定义，这就是显示此错误的原因

"Cannot read property 'map' of undefined"

试试这个代码：

{ customer?.loans?.map(item => (<li key={item.id}>{item?.area}</li>))}

或

{ customer?.loans?.length > 0 ? 
(customer.loans.map(item => (<li key={item.id}>{item.area}</li>)))
: undefined}

【讨论】：

【解决方案3】：

您可以将此数组保存为其他状态：

    function DataFetching() {
  const [customer, setCustomer] = useState({})
  const [id, setId] = useState(1)
  const [idFromButtonClick, setIdFromButtonClick] = useState(1)
  const [loans, setLoans] = useState([])

  const handleClick = () => {
    setIdFromButtonClick(id)
  }

  useEffect(() => {
    axios
      .post(`http://localhost:9090/api/customer/getCustomerByCid`, {
        cid: idFromButtonClick,
      })
      .then(({data}) => {
        console.log(res)
        const loans = data.loans ? data.loans : [];
        setCustomer(data)
        setLoans(loans)
      })
      .catch(err => {
        console.log(err)
      })
  }, [idFromButtonClick])
  return (
    <div>
      <input type="text" value={id} onChange={e => setId(e.target.value)} />
      <button type="button" onClick={handleClick}>
        Fetch Post
      </button>{' '}
      <br></br>
      <br></br>
      {loans.map(item => (
        <li key={item.id}>{item.area}</li>
      ))}
    </div>
  )
}

或者可以将此代码用于地图项：

{customer.loans &&
    customer.loans.map(item => <li key={item.id}>{item.area}</li>)}

【讨论】：

【解决方案4】：

如果loans在迭代之前不存在于对象中，请设置默认值。

{ (customer?.loans || []).map(item => (<li key={item.id}>{item.area}</li>))}

【讨论】：