reactjs - 在 array.find() 抛出对象后返回字符串值作为 React 子对象无效

Question

在下面的代码片段中，console.log(el.distance) 等于一个string。出于某种原因，如果我尝试 return el.distance React 会不断向我抛出经典:

错误:对象作为 React 子项无效(找到:具有键 {item, distance} 的对象)。如果您打算呈现子项集合，请改用数组。

  return evtsFiltered?.map((item) => {
    return (
      <div>
        Distance:
        {distance?.find((el) => {
          if (el.item === item._id) console.log(el.distance)
        })}
      </div>
    )
  })

怎么可能？

我也试过像这样把它放在html标签之间

return evtsFiltered?.map((item) => {
    return (
      <div>
        Distance:
        {distance?.find((el) => {
          if (el.item === item._id) return <p> {el.distance} </p>
        })}
      </div>
    )
  })

没有任何效果，请帮忙!

Answer 1

.find从满足测试函数的数组中返回一个对象。 find的结果如果数组是对象类型，则不能简单地是一个字符串。

你应该这样做

{distance?.find((el) => el.item === item._id)?.distance}