React 中的映射数组给出了.map 不是 function

Question

我在尝试 output 我的错误反应时遇到了麻烦。 数据来自外部 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;

我收到的错误是；

errorData.errors.map is not a function

以下是我想要实现的目标；

<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>

Answer 1

您正在尝试在 object 上运行.map()。 .map() 仅可用于可迭代对象。

You might try creating an array from the object using Object.keys, Object.values, Object.entries, or another method that creates an array from an object.

Answer 2

2个问题。

1. 您正在尝试通过 object 进行 map。 你应该声明做：

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

2. 您的map function 缺少return语句，您可以通过删除如上所示的花括号来隐式包含该语句。

Answer 3

首先，您不能在对象上使用map ，因为map本身就是Array的方法。 正如您在文档中看到的，它是Array.prototype.map 。 所以在这里你可以在映射之前将错误转换为数组。 这里我使用Object.entries因为我还想显示导致错误的字段。

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

• 您返回了 2 个相邻元素， div和ul 。 您必须仅将其包装到一个元素中。 你可以使用div来包装，但我更喜欢使用React.Fragment
• 在映射时，您不会返回任何要渲染的内容，因此在您的示例中，它将返回一个undefined列表，它不会显示任何内容。 此处的解决方案是使用显式return或简写() => (<yourelement />)

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>
    );
  }
}

现场演示：