javascript - react 错误 - "is missing in props validation"

Question

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

错误说:“column.title”缺少 Prop 验证“列”缺少 Prop 验证”column 是来自父元素的 props，我对该 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 .