Javascript 映射中的数组。映射不是函数

我在尝试输出react中的错误时遇到问题。数据来自外部API，格式如下

{
    "message": "The given data was invalid.",
    "errors": {
        "name": [
            "The name field is required."
        ],
        "address": [
            "The address field is required."
        ],
        "postcode": [
            "The postcode field is required."
        ]
    }
}

返回API数据和错误组件的页面如下所示：

const ShowData = () => {
    const [errorData, setErrorData] = useState([]);

    const onSubmit = handleSubmit(async ({ name, address, postcode }) => {
        if (errorData) setErrorData([]);

        try {
            // Call API and process here
        } catch (error) {
            setErrorData(error.data);
        }
    });

    return (
        <div>
            {errorData && !Object.keys(errorData).length == 0 &&
                <ErrorComponent errorData={errorData} />
            }
        </div>
    )
}

export default ShowData;


class ErrorComponent extends Component {
    render() {
        const errorData = this.props.errorData;

        return (
            <div>{errorData.message}</div>
            <ul>
                {errorData.errors.map(error => {
                    <li>{error}</li>
                })}
            </ul>
        )
    }
}

export default ErrorComponent;

以下是我正在努力实现的目标

<div>The given data was invalid.</div>
<ul>
    <li>The name field is required.</li>
    <li>The address field is required.</li>
    <li>The postcode field is required.</li>
</ul>

给定的数据无效。

名称字段是必需的
地址字段是必需的
“邮政编码”字段是必需的

您试图在对象上运行.map（）。map（）仅在iterables上可用

您可以尝试使用object.keys、object.values、object.entries或其他从对象创建数组的方法从对象创建数组。

2问题

您正在尝试通过对象进行映射。你应该做：

{Object.values（errorData.errors）.map（（e，i）=>
{e[0]}
)}

您的

map

函数缺少

return

语句，您可以通过删除上面的大括号来隐式包含该语句

---

首先，您不能在对象上使用

map

，因为

map

本身是

Array

的一种方法。正如您在文档中看到的，它是。因此，您可以在映射之前将错误转换为数组。这里我使用，因为我还想显示导致错误的字段

除了迭代errorData之外，还有其他问题：

• 您返回了两个相邻的元素，

  div

  和

  ul

  。必须仅将其包装为一个元素。您可以使用

  div

  来包装，但我更喜欢使用

  React.Fragment

• 在映射时，您不返回任何要渲染的内容，因此在您的示例中，它将返回一个

  未定义的列表

  ，该列表将不显示任何内容。这里的解决方案是使用显式的

  返回

  ，或者使用

  （）=>（）

class ErrorComponent扩展了React.Component{
render（）{
const errorData=this.props.errorData；
返回(
{errorData.message}

{Object.entries（errorData.errors）.map(
（[errorField，errorMessages]）=>(

{errorField}:{errorMessages[0]}

)
)}

);
}
}

现场演示：

---

errorData.errors

是一个对象，而不是数组

<div>The given data was invalid.</div>
<ul>
    <li>The name field is required.</li>
    <li>The address field is required.</li>
    <li>The postcode field is required.</li>
</ul>

   <ul>
         {Object.values(errorData.errors).map((e, i) =>
               <li key={i}>{e[0]}</li>
         )}
   </ul>

class ErrorComponent extends React.Component {
  render() {
    const errorData = this.props.errorData;

    return (
      <React.Fragment>
        <div>{errorData.message}</div>
        <ul>
          {Object.entries(errorData.errors).map(
            ([errorField, errorMessages]) => (
              <li>
                {errorField}: {errorMessages[0]}
              </li>
            )
          )}
        </ul>
      </React.Fragment>
    );
  }
}