>source

'persons'상태를 매핑하고 'person'목록을 반환 해야하는 반응 구성 요소가 있는데 목록을 잘 표시하고 deletePersonHandler는 여전히 작동하지만 입력 입력을 시작하면 TypeError가 발생합니다.

TypeError : props.persons.map은 기능이 아닙니다

JS를 처음 접했고 React를 처음 접했기 때문에 어떤 포인터라도 대단히 감사하겠습니다!

내 사람 구성 요소 :

const persons = (props) =>  
  props.persons.map((person, index) => {
        return (
          <Person 
          click={() => props.clicked(index)}
          name={person.name}
          age={person.age}
          //each item in a list needs a key, should be unique and unchanging
          key={person.id}
          changed={(event) => props.changed(event, person.id)} />
          )
      });

그런 다음 App.js에 있습니다

let people = null;
    if (this.state.showPersons) {
      people = (
        <div>
          <Persons 
            persons = {this.state.persons}
            clicked = {this.deletePersonHandler}
            changed = {this.nameChangedHandler} 
            />     
        </div>
      );       
    }

마침내 App.js에도 이름이 변경되었습니다.

nameChangedHandler = (event, id) => {
        const personIndex = this.state.persons.find(p => {
      return p.id === id;
    });
    const person = {...this.state.persons[personIndex]};
    person.name = event.target.value;
    person[personIndex] = person; 
    this.setState({ persons: person });
  }

입력 할 때 이름이 변경 될 것으로 예상되지만 typetype을 입력하자마자

많은 감사합니다!

  • 답변 # 1

    사람은 대상이기 때문입니다. .map은 배열에 고유 한 함수입니다. props.persons.map 대신   Object.keys(props.persons).map 와 같은 것을 시도하십시오

    Object.keys() 를위한

    doc  여기 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/keys

    도움이 된 희망 (:

  • 답변 # 2

    persons 를 설정하고 있습니다  개체에. 코드에서 persons 만 결론을 내릴 수 있습니다.  처음에는 배열입니다 ( find 를 호출 할 수 있기 때문에)  그 위에). 당신은 당신의 nameChangeHandler 를 변경할 수 있습니다  

    nameChangedHandler = (event, id) => {
      const personIndex = this.state.persons.find(p => {
        return p.id === id;
      });
      const person = { ...this.state.persons[personIndex] };
      person.name = event.target.value;
      person[personIndex] = person;
      // Notice the change here
      const newPersons = [...this.state.persons].splice(personIndex, 1, person);
      this.setState({ persons: newPersons });
    };
    
    

    배열 #splice를 사용하여 이전 person 를 바꿉니다.  새 배열을 생성합니다.

  • 이전 ios - URL 체계를 통해 앱을 시작한 후 다국어 URL이 이상한 문자로 변경됨
  • 다음 ANSI C에서 임의 길이 배열 검사