0

Soy nuevo en . Estoy haciendo un todolist guiándome de este tutorial.

Código

import React from 'react';

const TodoForm=({submit})=>{
  let input;
  return (
    <div>
      <input ref={node=>
        {
          input=node
        }}
      />
      <button onClick={()=>{submit(input.value); input.value=''}} >+</button>
    </div>
  )
}

const Title=()=>{
  return(<h1>Todo App</h1>)
}

const TodoItem=({item,remove})=>{
  console.log("todo ite", item);
  return (
    <li onClick={remove(item.id)}>{item.text}</li>
  )
}

const TodoBody=({items,removeItem})=>{
  console.log("itms==",items);
  const todoNode=items.map(todo=>{
    return (
      <TodoItem key={todo.id} item={todo} remove={removeItem} />
    )
  })
  return(
    <ul>
      {todoNode}
    </ul>
  )
}

window.id=0;
export default class TodoApp extends React.Component{
  constructor(props){
    super(props);
    this.state={
      data:[]
    };
    this.apiUrl = 'http://5958e93d3715030011b89a8a.mockapi.io/todo'
  }
  submitTodo(val){
    console.log("val a subir", val);
    const todo={text:val,id:window.id++}
    axios.post(this.apiUrl, todo)
      .then((res) => {
        this.state.data.push(res.data);
        this.setState({data: this.state.data});
      });
  }
  componentDidMount(){
    // Make HTTP reques with Axios
    axios.get(this.apiUrl)
      .then((res) => {
        console.log("res.data",res.data);
        // Set state with result
        this.setState((prevState, props) => ({
          data: res.data
        }));
      });
  }
  removeItem(id){
    const todo=this.state.data.filter(item=>{
      if(item.id!=id){
        return item;
      }
      axios.delete(this.apiUrl+'/'+id)
        .then((res) => {
          this.setState({data: todo});      
        })
    })
    this.setState({data:todo});
  }
  render(){
    return(
      <div>
        <Title />

        <TodoForm submit={this.submitTodo.bind(this)} />    

        <TodoBody removeItem={this.removeItem.bind(this)} items={this.state.data} />
      </div>
    )
  }
}

Cuando inicio la aplicación, me sale todo un pull de requests a la api , aproximadamente 1 por cada dato. No puedo actualizar, eliminar ni traer datos, buscando veo que this.setState debe ir en uno de los componentes del ciclo de vida, pero estando en el componentDidMount, me devuelve un sin fin de requests a la api. ¿Cómo solucionar este problema?.

introducir la descripción de la imagen aquí

1
  • El problema, según veo está en remove. Mira mi respuesta.
    – gugadev
    el 2 jul. 2017 a las 13:43

1 respuesta 1

0

No puedo actualizar, eliminar ni traer datos, buscando veo que this.setState debe ir en uno de los componentes del ciclo de vida, pero estando en el componentDidMount, me devuelve un sin fin de requests a la api

No veo ningún indicador de un renderizado infinito. El hook componentDidMount solo se dispara una vez en cuanto el elemento ha sido montado en el DOM; aquí puedes actualizar el estado de forma segura ya que los componentes creados con ES6 classes mantienen un estado propio; es decir, que en tiempo de ejecución, estos componente recuerdan el estado que tienen y reaccionan a algún cambio que ocurra en ellos. Se haría un renderizado infinito si hicieses el fetch en el hook componentWillUpdate por ejemplo.

El problema lo veo en esta línea:

<li onClick={remove(item.id)}>{item.text}</li>

Fíjate que estás ejecutando el método remove en cada renderización y que, a su vez, actualizará el estado, volviendo a renderizar el componente. Al ejecutar el método remove en la renderización, este actualizará el estado de TodoApp y por consiguiente, se volverá a pasar los items por propiedad y volverá a ejecutar remove, repitiéndose el ciclo una y otra vez.

Lo correcto es:

<li onClick={() => remove(item.id)}>{item.text}</li>

Como haces en el resto de componentes; en este caso sí asignas una función al evento click del elemento de lista.

3
  • Gracias amigo, se me habia pasado ese punto , sin embargo no entiendo lo de estar ejecutando el metodo remove en cada renderizacion , siempre los metodos de los eventos deberian ser callbacks?
    – Kevin AB
    el 2 jul. 2017 a las 22:51
  • lo que se me ocurre esque onClick necesita el callback para manejar la asincronica pues en el contexto de ejecución pasa a la api de js ,donde se maneja según el evento.
    – Kevin AB
    el 2 jul. 2017 a las 22:58
  • Hola @KevinAB. Para entender por qué pasa esto debes saber cómo funciona el ciclo de vida de un componente. Cuando ejecutas el método remove directamente en el render hace que se actualice el estado del componente principal. Ahora, si se a tualiza el estado del componente principal, entonces todos los componentes que obtengan por props datos de este componente se volverán a renderizar y, como al volverse a renderizar se vuelve a ejecutar remove, entonces pasa lo mismo una y otra vez.
    – gugadev
    el 3 jul. 2017 a las 12:34

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.