javascript - 为什么遵循 Ant-Design 语法不渲染任何东西？

Question

我尝试过这种方式，但没有数据显示，在编译时，我没有收到任何错误。我是 React 新手，在此先感谢

const Students = (props) => {
  let id = props.students;
  const [studentsData, setStudentsData] = useState(null);
  const url = "http://localhost:2021/students-data/" + id;
  console.log(url);

  useEffect(() => {
    axios.get(url).then((res) => {
      setStudentsData(res.data);
    });
  }, [url]);

  if (!studentsData) {
    return <Spin />;
  }

  //   console.log(studentsData)

  return (
    <List
      dataSource={studentsData}
      renderItem={(item) => {
        <List.Item key={item._id}>
          <Collapse style={{ minWidth: "257px" }}>
            <Panel header={item.name}>
              <Row gutter={[16, { xs: 8, sm: 16, md: 24, lg: 32 }]}>
                <Col className="gutter-row index" span={8}>
                  <div>Year Of Batch</div>
                </Col>
                <Col className="gutter-row value" span={16}>
                  <div>{item.yearOfBatch}</div>
                </Col>
              </Row>
              <Row gutter={[16, { xs: 8, sm: 16, md: 24, lg: 32 }]}>
                <Col className="gutter-row index" span={8}>
                  <div>Skills</div>
                </Col>
                <Col className="gutter-row value" span={16}>
                  <div>
                    {item.skills.map((e) => {
                      return e + " , ";
                    })}
                  </div>
                </Col>
              </Row>
            </Panel>
          </Collapse>
        </List.Item>;
      }}
    />
  );
};

export default Students;

为什么当我将折叠分配给 renderItem 属性时数据不呈现？ 这里的主要问题是什么？以及如何修改当前代码以正常工作

标签： javascriptreactjsreact-hooksantd

Answer 1

你错过了道具return里面的关键词renderItem

应该是这样的

//...
renderItem={(item) => {
        return (<List.Item key={item._id}>
          <Collapse style={{ minWidth: "257px" }}>
//...

在这种情况下，它按预期工作