0
Follow
2
View

How to render a list item using this.state.items.map?

dzy213127 注册会员
2023-01-25 09:50

I fixed the error. I was missing a parenthesis after 'response.json' in my FormSubmit function.

    async formSubmit(formData) {
      var data = new FormData(formData)
      await fetch(this.state.api_url, {
        method: "POST",
        mode: "cors",
        body: data
      }).then(response => response.json)
      .then(response => this.props.updateTodoList(response))
    }

became

    async formSubmit(formData) {
      var data = new FormData(formData)
      await fetch(this.state.api_url, {
        method: "POST",
        mode: "cors",
        body: data
      }).then(response => response.json())
      .then(response => this.props.updateTodoList(response))
    }

and that fixed it.

dyzwang4444 注册会员
2023-01-25 09:50

For Example: You could use package such as 'uuid' which basically just allows you to generate uuid() by installing it as a package.

step1- npm install uuidv4

step2- import {v4 as uuidv4} from 'uuid';

ste3- edit your line of code as below

{this.state.items.map((item) => ({item}

Note : items.map((item, index) => key={index}), This is going to be index of current todo item that's being looped through the items array.

UUID : A Universally Unique Identifier (UUID) is an identifier standard used in many non-MultiValue databases and software to generate a Unique ID outside of using incremental numbers.

dj7311 注册会员
2023-01-25 09:50

Your item.id isn't unique. Try to console.log your item.id to check if they are unique.

Or try:

{this.state.items.map((item, index) => (
    {item}
))}

About the Author

Question Info

Publish Time
2023-01-25 09:50
Update Time
2023-01-25 09:50