Question

类型错误：无法读取 reactjs 中未定义的属性“map”

2020-12-08

52

reactjs react-hooks jsx

嗨，伙计们正在遇到一个错误，例如无法阅读属性，不知道我在哪里，请尝试解决我的错误或告诉我我该怎么办？

8177765025

这是我的人。

Answer 1

对于您的情况，只需进行简单检查即可：

(people && people.length > 0) && people.map(...)

原因是 people 在第一次渲染时未定义，因为 useEffect 不会立即执行。

Answer 2

<People people={['Jon', 'Paul']} />

您未在 people.map() 中返回任何内容

将其更改为：

import React from 'react';

const People = (props) => {
  const { people } = props;

  return (
    <div className="row">
      {people.map((peple) => (
        <div className="col-md-3">
          <div className="card">
            <div className="card-body">
              <h4>{peple}</h4>
            </div>
          </div>
        </div>
      ))}
    </div>
  );
};

export default People;

请注意，我已删除一对花括号。

或者，您可以使用如下显式返回：

import React from 'react';

const People = (props) => {
  const { people } = props;

  return (
    <div className="row">
      {people.map((peple) => {
        return (
          <div className="col-md-3">
            <div className="card">
              <div className="card-body">
                <h4>{peple}</h4>
              </div>
            </div>
          </div>
        );
      })}
    </div>
  );
};

export default People;