Блог

Главная - Вопросы по программированию - почему, следуя синтаксису Ant-Дизайна, ничего не визуализируется?

почему, следуя синтаксису Ant-Дизайна, ничего не визуализируется?

#javascript #reactjs #react-hooks #antd

Вопрос:

Я пробовал этот способ ,но данные не отображаются, и во время компиляции я не получаю никаких ошибок.Я новичок в Реагировании , заранее спасибо

 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;

почему данные не отображаются, когда я назначил collapse атрибуту renderItem ?
в чем здесь главная проблема ? и как изменить текущий код для правильной работы

Комментарии:

1. В вашем эффекте использования укажите props.students как зависимость вместо URL-адреса и внесите логику создания URL-адреса в эффект использования.

2. Я не понимаю, URL состоит из реквизита. студенты, значит, не имеет значения, правильно ли то, что мы ставим в зависимость? в любом случае, я попробовал ваше предложение, но, тем не менее, данные из этого компонента не отображаются

3. Всякий раз, когда реквизит меняется, компонент будет повторно отправлен. Вы правы, ваш код может сработать. Я хотел убедиться, что useEffect запускается при каждом изменении идентификатора.

Ответ №1:

Вы пропустили return ключевое слово внутри renderItem реквизита

Это должно быть так

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

В этом случае все работает так, как ожидалось

Комментарии:

1. Да, большое спасибо. Это сработало

Метки: , ,