地图的未定义对象

Question

我正在学习反应。我只想测试带有钩子的数组的双重绑定，因此我创建了一个带有一个表格并输入来修改我在状态中设置的对象的属性。设置状态后，我将获得一个无法读取未定义的属性的"地图"。

我比较原始对象和新对象，并且都具有相同的结构

//For App.js
import React, { useState } from 'react';
import Person from './Person/Person'
import './App.css';
const App = props => {
  const [peopleState, setPeopleState] = useState({
    people: [{ id: "001", name: "John Smith", address: "Main AV", phone: "312312" },
    { id: "002", name: "Marc Muller", address: "Second AV", phone: "345435" },
    { id: "003", name: "Sam Lopez", address: "Thrid AV", phone: "456444" },
    { id: "004", name: "Peter McNiece", address: "Road AV", phone: "213456" }]
  });
  const changeHandler = (event, index) => {
    //This should be changed by using a copy
    console.log(JSON.stringify(peopleState))
    const newList = peopleState;
    const newObj = peopleState.people[index];
    newObj.name = event.target.value;
    newList.people[index] = newObj;
    setPeopleState({ newList })
    console.log(JSON.stringify(peopleState))
  }
  let listOfPeople = null;
  listOfPeople = (
    <div>
      {
        peopleState.people.map((p, index) => {
        return <Person name={p.name} address={p.address} phone={p.phone}
          changed={(event) => changeHandler(event, index)} />
      })}
    </div>)
  return (
    <div>
      <h1>Example</h1>
      {listOfPeople}
    </div>
  );
}
export default App;
//For Person.js
import React from 'react';
import './Person.css';
const person = (props)=>{
    return(
        <div className="Person">
            <table>
                <tr>
                    <td>{props.name}</td>
                    <td>{props.address}</td>
                    <td>{props.phone}</td>
                    <td><input type="text" onChange={props.changed} value={props.name} /></td>
                </tr>    
            </table>    
        </div>
    );
}
export default person;

顺便说一句，如果我要更新，我是否必须克隆状态的对象？

Answer 1

您可以像这样完成双重结合的外观

也是沙箱，如果您想在操作中看到它：https：//codesandbox.io/s/7345kyly21

import React, { useState, useEffect } from "react";
import Person from "./Person";
import ReactDOM from "react-dom";
const App = props => {
  const [peopleState, setPeopleState] = useState({
    people: [
      { id: "001", name: "John Smith", address: "Main AV", phone: "312312" },
      { id: "002", name: "Marc Muller", address: "Second AV", phone: "345435" },
      { id: "003", name: "Sam Lopez", address: "Thrid AV", phone: "456444" },
      { id: "004", name: "Peter McNiece", address: "Road AV", phone: "213456" }
    ]
  });
  const changeHandler = (event, index) => {
    const newList = peopleState.people.map((person, pIndex, array) => {
      if (index === pIndex) {
        return {
          ...person,
          name: event.target.value
        };
      } else {
        return person;
      }
    });
    setPeopleState({ people: newList });
  };
  useEffect(() => {
    console.log(peopleState);
  }, [peopleState]);

  const renderList = () => {
    return (
      <div>
        {peopleState.people.map((p, index) => {
          return (
            <Person
              name={p.name}
              address={p.address}
              phone={p.phone}
              changed={event => changeHandler(event, index)}
            />
          );
        })}
      </div>
    );
  };
  return (
    <div>
      <h1>Example</h1>
      {renderList()}
    </div>
  );
};

同样，同样的是，您遇到未定义的地图错误的原因是：

setPeopleState({ newList })

当您通过这样的参数时，您将通过新的键值传递。您的状态变量变为{newList：[arrayofpeople]}，并且您仍然尝试通过pepoylestate.people绘制渲染中的映射。 .people不再是您所在州的关键，这就是为什么您变得不确定的原因。