反应错误 - “道具验证中缺少”

Question

这是我第一次遇到这个错误，我在两个月前做的上一个 react-app 项目中从来没有遇到过这个错误

错误表明： 'column.title' 缺少道具验证 'column' 缺少道具验证" column 是来自父元素的道具，我使用解构到该 props.column

我使用 eslint 告诉我这种类型的错误...只是为了补充信息

这是 App.js：

import React from 'react';
import Column from './Column';
import { initialData } from './initial-data';

const App = () => {
  const [Data] = React.useState(initialData);

  React.useEffect(() => {
    console.log(Data);
  }, [Data]);

  return Data.columnOrder.map((dataId) => {
    const { tasks, columns } = Data;
    const column = columns[dataId];
    const tasksData = column.taskIds.map((taskId) => tasks[taskId]);

    return <Column key={column.id} column={column} tasks={tasksData}></Column>;
  });
};

export default App;

这是 Column.js: ---> 我收到了错误

import React from 'react';
// import styled from 'styled-components';

// const Container = styled.div``;
// const Title = styled.h3``;
// const TaskList = styled.div``;

const Column = (props) => {
  const { title } = props.column;  --> 'error is in this line'

  return <p> {title} </p>;
};

export default Column;

Answer 1

我认为，问题是 eslint 想让你使用 PropTypes。

您需要在 Column 组件之后添加类似这样的内容（但使用您的 props 属性）：

Column.propTypes = {
    column: PropTypes.shape({
        title: PropTypes.string
    })
};

另外，别忘了安装prop-types。