Как сделать компонент реагирования для каждого элемента в файле JSON? - PullRequest
Новая
       45

Как сделать компонент реагирования для каждого элемента в файле JSON?

0 голосов
/ 15 апреля 2020

Я хочу создать приложение для тренировки, поэтому я создал файл JSON, который имеет "имя-упражнения" и "описание" (я просто играю с реакцией)

1-й, я создал компонент под названием "ExerciseCard" 

  import React from 'react'

function ExerciceCard(props) {

        return(
            <h1>this is the exercie {props.exerciceName}</h1>
        )
}


export default ExerciceCard

и затем я создал страницу с именем CreateNewWorkout 

import React from 'react'
import ExerciseCard from '../component/ExerciseCard'

class CreateNewWorkout extends React.Component {
    state = {
        exercises : []
    }

    async    componentDidMount() {

        let response  = await fetch("http://localhost:1337/calisthenics-exercices")
        const data =  await response.json()
//i wanted to loop throgh the array of and push the exerciceName to the exercise state array
        for (let i = 0; i <data.lenght; i++) {
            this.setState({exercices : [...this.state.exercises, data[i].exeriseName]})
        }

    }
    render() {
        return(
            <>
            <ExerciseCard exerciceName = {this.state.exercice} ></ExerciseCard>
            </>
        )
    }

}

export default CreateNewWorkout

В настоящее время у меня есть два "упражнения" в файле JSON, и я хочу знать, как отрисовать ExerciseCard компонент два раза (в данном случае).

Ответы [ 2 ]

0 голосов
/ 15 апреля 2020

Довольно просто, что вы не можете установить State несколько раз в al oop, вместо этого сначала pu sh всех элементов в списке, а затем, наконец, установите состояние, как показано ниже 

async    componentDidMount() {
        let response  = await fetch("http://localhost:1337/calisthenics-exercices");
        const data =  await response.json();
const updatedState = [...this.state.exercise]
data.forEach( item => updateState.push(item))
setState({exercises : updatedState});

, а затем измените порядок сделать это 

    render() {
        return(
            <div>
                {this.state.exercise.map(item => <ExerciseCard exerciseName ={item} />)}
            <div/>
        )
    }
0 голосов
/ 15 апреля 2020

Обычно это происходит следующим образом 

<div>
  {dataAsArray.map(val, i) => (
    <div key={i}>{val}</div>
  )}
</div>

Итак, вам нужно 

<div>
 {this.state.exercice.map(ex, i) => (
   <ExerciseCard exerciceName={ex} key={i} />
 )}
</div>

Примечание. Поток данных в компоненте неправильный - не для производственного использования.

...