Блог

я новичок, начинающий с react js. что я пытаюсь здесь сделать, так это изменить имя животного, когда я нажимаю кнопку под именем. ( например, измените racoon на allegator, когда я нажму кнопку )

это код родительского компонента.

 import React, { Component } from "react";
import Child from "./Child";
class Parent extends Component {
  state = {
    animals: [
      { id: 1, name: "racoon", secondName: "allegator", bool: false },
      { id: 2, name: "dog", secondName: "hippo", bool: false },
      { id: 3, name: "cat", secondName: "tiger", bool: false },
    ],
  };
  handleChange = (animal) => {
    console.log(animal);
    const newArray = [...this.state.animals];
    const filterIndex = this.state.animals.findIndex((a) => a.id === animal.id);
    newArray[filterIndex] = {
      ...newArray[filterIndex],
      bool: !newArray[filterIndex].bool,
    };
    this.setState({ animals: newArray });
  };

  render() {
    return (
      <div>
        {this.state.animals.map((animal) => (
          <Child
            id={animal.id}
            name={animal.name}
            secondName={animal.secondName}
            change={() => this.handleChange(animal)}
            bool={this.state.bool}
          />
        ))}
      </div>
    );
  }
}
export default Parent;
 

и ниже приведен дочерний компонент

     import React, { Component } from "react";
class Child extends Component {
  state = {
    animal: this.props.name,
  };
  render() {
    const { change, bool, secondName, name, id } = this.props;

    return (
      <>
        <h1>animal number{id}</h1>
        <p>{bool ? secondName : name}</p>
        <button onClick={change}>이름바꾸기</button>
      </>
    );
  }
}

export default Child;
 

я хотел переключить { bool : !это.состояние.bool } bool от true до false и примените это только к одному объекту, который был нажат.(onClick).

я пытался написать логику, чтобы установить состояние только одного ключа в одном объекте в массиве.

я не знаю, где я ошибся. может ли кто-нибудь заставить эту кнопку работать так, как она должна работать? исправьте мой код, пожалуйста

Передайте идентификатор в качестве параметра onClick in Child.jsx.

 <button onClick={() => change(id)}>이름바꾸기</button>
 

Затем используйте это id , чтобы изменить состояние.

 handleChange = (id) => {
  const filterIndex = this.state.animals.map((animal) => animal.id === id ? ({...animal, name: 'racun or any other name', bool: !animal.bool}) : animal);

  this.setState({ animals: newArray });
};
 

Надеюсь, это сработает. Спасибо, брат.

 import React, { Component } from "react";
import Child from "./Child";
class Parent extends Component {
  state = {
    animals: [
      { id: 1, name: "racoon", secondName: "allegator", bool: false },
      { id: 2, name: "dog", secondName: "hippo", bool: false },
      { id: 3, name: "cat", secondName: "tiger", bool: false },
    ],
  };
  handleChange = (id) => {
    let updateBool = this.state.animals.map((animal) =>
      animal.id === id ? { ...animal, bool: !animal.bool } : animal
    );
    this.setState({ animals: updateBool });

    
  };

  render() {
    return (
      <div>
        {this.state.animals.map((animal) => (
          <Child
            id={animal.id}
            name={animal.name}
            secondName={animal.secondName}
            change={this.handleChange}
            bool={animal.bool}
          
          />
        ))}
      </div>
    );
  }
}
export default Parent;



import React, { Component } from "react";
class Child extends Component {
  render() {
    const { change, bool, secondName, name, id } = this.props;

    return (
      <>
        <h1>animal number{id}</h1>
        <p>{bool ? secondName : name}</p>
        <button onClick={() => change(id)}>이름바꾸기</button>
      </>
    );
  }
}

export default Child;









 

Вы должны заменить bool={this.state.bool} на bool={animal.bool} .

Вы можете упростить эту handleChange функцию, используя this.state.animals.map(...)

 class Parent extends Component {
  state = {
    animals: [
      { id: 1, name: "racoon", secondName: "allegator", bool: false },
      { id: 2, name: "dog", secondName: "hippo", bool: false },
      { id: 3, name: "cat", secondName: "tiger", bool: false },
    ],
  };

  handleChange = id => {
    const newAnimals = this.state.animals.map(animal => {
      return (id === animal.id) ? 
        {...animal, bool: !animal.bool} :
        animal;
    });
    this.setState({ animals: newAnimals });
  };

  render() {
    return (
      <div>
        {this.state.animals.map(animal => (
          <Child
            id={animal.id}
            name={animal.name}
            secondName={animal.secondName}
            change={this.handleChange}
            bool={animal.bool}
          />
        ))}
      </div>
    );
  }
}

class Child extends Component {
  render() {
    const { change, bool, secondName, name, id } = this.props;

    return (
      <>
        <h1>animal number{id}</h1>
        <p>{bool ? secondName : name}</p>
        <button onClick={() => change(id)}>이름바꾸기</button>
      </>
    );
  }
}