Question

let nofificationsarray = [{message:"Contract GGK011SH0001C need approval in the system", notificationDate:"2018-06-05 06:23:48", profileFileId:"", "username: siva"},
{message:"Contract GGK011SH0002C need approval in the system", notificationDate:"2018-07-05 06:23:48", profileFileId:"", "username: siva"},
{message:"Contract GGK011SH0003C need approval in the system", notificationDate:"2018-08-05 06:23:48", profileFileId:"", "username: siva"},
{message:"Contract GGK011SH0003C need approval in the system", notificationDate:"2018-09-05 06:23:48", profileFileId:"", "username: siva"}
]

在这个notificationarray变量中，我有所有通知的数组信息。基于数组字段，我想动态填充所有通知。

我正在尝试使用数组地图并尝试填充但我无法获得任何内容

const allnotifications = notificationsarray && notificationsarray.map((value, key) => {
        return <li className="notification_block">
        <div className="notification_profile_img">
        <img src={value.profileFileId} className="profile_img"/>
        </div>
        <div className="notification_profile_txt">
          <h4> {value.username}</h4>
          <p> {value.message} </p>
          <p><small>{value.notificationDate}</small></p>
        </div>
      </li>
          });

我希望根据通知数组的长度来循环这个<li>标记在这种情况下，我在数组中有3个对象我希望这个<li>标记来3次

提前致谢。

Answer 1

你有一些语法错误 - 比如nofificationsarray的拼写，用户名siva中的错误。否则，您的解决方案是正确的。

https://codepen.io/smilesaayush/pen/rKMGJV

class App extends React.Component {
  constructor(props){
    super(props);
  }
  render() {
    let nofificationsarray = [{message:"Contract GGK011SH0001C need approval in the system", notificationDate:"2018-06-05 06:23:48", profileFileId:"", username: "siva"},
{message:"Contract GGK011SH0002C need approval in the system", notificationDate:"2018-07-05 06:23:48", profileFileId:"", username: "siva"},
{message:"Contract GGK011SH0003C need approval in the system", notificationDate:"2018-08-05 06:23:48", profileFileId:"", username: "siva"},
{message:"Contract GGK011SH0003C need approval in the system", notificationDate:"2018-09-05 06:23:48", profileFileId:"", username: "siva"}
];
    return (
      <div>
         {
          nofificationsarray.map((value, key) => {
            return (
              <li className="notification_block">
                <div className="notification_profile_img">
                <img src={value.profileFileId} className="profile_img"/>
                </div>
                <div className="notification_profile_txt">
                  <h4> {value.username}</h4>
                  <p> {value.message} </p>
                  <p><small>{value.notificationDate}</small></p>
                </div>
              </li>
            )

          })
        }
      </div>
    )

  }
}

如何显示数组的动态信息？

1 个答案: