Reactjs 无法在嵌套对象上设置状态

我在从输入更新嵌套对象的状态时遇到问题

更新了更多的代码。我试图建立一个多步骤的形式。第一页获取球队信息，第二页获取球员信息

父组件：

export class MainForm extends Component {
state = {
    step: 1,
    teamName: '',
    teamManagerName: '',
    teamManagerEmail: '',
    player: [{
        firstName: '',
        lastName: '',
        email: '',
        height: ''
    }]
}

// proceed to next step
nextStep = () => {
    const { step } = this.state;
    this.setState({
        step: step + 1
    })
}

// go to previous step
prevStep = () => {
    const { step } = this.state;
    this.setState({
        step: step - 1
    })
}

// handle fields change
handleChange = input => e => {
    this.setState({[input]: e.target.value});
}

render() {
    const { step } = this.state;
    const { teamName, teamManagerName, teamManagerEmail, player: { firstName, lastName, email, height}} = this.state;
    const values = {teamName, teamManagerName, teamManagerEmail, player: { firstName, lastName, email, height}};

    switch(step) {
        case 1:
            return (

                <FormTeamDetails
                    nextStep={this.nextStep}
                    handleChange={this.handleChange}
                    values={values}
                />
                )
        case 2:
            return (
               <FormPlayerDetails
                    nextStep={this.nextStep}
                    prevStep={this.prevStep}
                    handleChange={this.handleChange}
                    values={values}
               />
            )
        case 3:
            return (
                <Confirm
                    nextStep={this.nextStep}
                    prevStep={this.prevStep}
                    values={values}
           />
            )
        case 4:
            return (
                <h1>Scuccess!</h1>
            )
    }

}

导出类MainForm扩展组件{
状态={
步骤：1，
团队名称：“”，
teamManagerName:“”，
TeamManagerMail:“”，
玩家：[{
名字：''，
姓氏：“”，
电子邮件：“”，
高度：“”
}]
}
//继续下一步
下一步=（）=>{
const{step}=this.state；
这是我的国家({
步骤：步骤+1
})
}
//转到上一步
prevStep=（）=>{
const{step}=this.state；
这是我的国家({
步骤：步骤-1
})
}
//处理字段更改
handleChange=input=>e=>{
this.setState（{[input]：e.target.value}）；
}
render（）{
const{step}=this.state；
const{teamName，teamManagerName，teamManagerEmail，player:{firstName，lastName，email，height}}=this.state；
const value={teamName，teamManagerName，teamManagerEmail，player:{firstName，lastName，email，height}；
开关（步骤）{
案例1：
返回(
)
案例2：
返回(
)
案例3：
返回(
)
案例4：
返回(
成功！
)
}
}

}

下一个代码段是表单的第一页和子组件之一。handleChange函数在这里成功地完成了它的工作

export class FormTeamDetails extends Component {
continue = e => {
    e.preventDefault();
    this.props.nextStep();
}

render() {
    const { values, handleChange } = this.props;
    console.log(this.props)
    return (
        <Container>
            <Form>
                <FormGroup>
                    <Label for="teamName">Team Name</Label>
                    <Input 
                        type="teamName" 
                        name="teamName" 
                        onChange={handleChange('teamName')} 
                        defaultValue={values.teamName} />
                    <Label for="teamManagerName">Team Manager Name</Label>
                    <Input 
                        type="teamManagerName" 
                        name="teamManagerName" 
                        onChange={handleChange('teamManagerName')} 
                        defaultValue={values.teamManagerName}
                        />
                    <Label for="teamManagerEmail">Team Manager Email</Label>
                    <Input 
                        type="teamManagerEmail" 
                        name="teamManagerEmail" 
                        onChange={handleChange('teamManagerEmail')} 
                        defaultValue={values.teamManagerEmail} />

                    <Button 
                        label="Next"
                        // primary="true"
                        onClick={this.continue}
                        style={{float: 'right'}}>Next</Button>
                </FormGroup>
            </Form>
        </Container>

    )
}

导出类FormTeamDetails扩展组件{
继续=e=>{
e、 预防默认值（）；
this.props.nextStep（）；
}
render（）{
const{values，handleChange}=this.props；
console.log（this.props）
返回(
队名
团队经理姓名
团队经理电子邮件
下一个
)
}

}

这是表格的第二页，我遇到了一些问题：

export class FormPlayerDetails extends Component {
continue = e => {
    e.preventDefault();
    this.props.nextStep();
}

back = e => {
    e.preventDefault();
    this.props.prevStep();
}

render() {
    const { values: { player }, handleChange, values } = this.props;

    return (
        <Container>
            <h3>Add players</h3>
            <Form>
            <Row form>
                <Col md={3}>
                <FormGroup>
                    <Input type="firstName" 
                    name="firstName" 
                    id="firstName" 
                    placeholder="First Name" 
                    defaultValue={values.player.firstName} 
                    onChange={handleChange('values.player.firstName')} 
                    />
                </FormGroup>
                </Col>
                <Col md={3}>
                <FormGroup>
                    <Input type="lastName" name="lastName" id="lastName" placeholder="Last Name"  />
                </FormGroup>
                </Col>
                <Col md={3}>
                <FormGroup>
                    <Input type="email" name="email" id="email" placeholder="Email" />
                </FormGroup>
                </Col>
            </Row>

            <Row form>
                <Col>
                <Button 
                        label="Back"
                        // primary="true"
                        onClick={this.back}
                        style={{float: 'left'}}>Back</Button>
                </Col>
                <Col>
                <Button 
                        label="Next"
                        // primary="true"
                        onClick={this.continue}
                        style={{float: 'right'}}>Next</Button>
                </Col>
            </Row>

            </Form>
        </Container>

    )
}

导出类FormPlayerDetails扩展组件{
继续=e=>{
e、 预防默认值（）；
this.props.nextStep（）；
}
后退=e=>{
e、 预防默认值（）；
this.props.prevStep（）；
}
render（）{
const{values:{player}，handleChange，values}=this.props；
返回(
添加玩家
返回
下一个
)
}

}

---

我无法用输入值更新player属性。另外，我想在这个组件中添加多个播放器输入字段。我希望至少有5名球员被添加到团队中，因此父组件中的球员数组。请让我知道我是否应该用另一种方式来处理这件事。提前谢谢你

对于FormPlayerDetails，您不需要传递完整的值，而只需要传递values.players。既然你的玩家属性是一张桌子。。。改为使用map函数

您所在州的

player

属性是一个数组，但您将其视为一个对象。所以，我假设会有一个玩家，它将是一个对象。这里有一个解决方案。但感觉上您正在为许多不必要的事情而挣扎，比如传递值，等等，因为您已经为输入设置了

name

属性。我不知道，也许你在考虑其他情况

以下是

handleChange

部分：

handleChange = input => e => {
  const { target } = e;
  if (input === "player") {
    this.setState(prev => ({
      player: {
        ...prev.player,
        [target.name]: target.value
      }
    }));
  } else {
    this.setState({ [input]: target.value });
  }
};

以下是输入部分：

<Input
  type="firstName"
  name="firstName"
  id="firstName"
  placeholder="First Name"
  defaultValue={values.player.firstName}
  onChange={handleChange("player")}
/>

您正在将字符串而不是变量传递给

handleChange

函数。我将其更改为：onChange={handleChange（values.player.firstName）}，但仍然无法设置它。此外，除了我的第一条注释外，您更新状态的方法似乎是错误的。在当前形状中，它使用输入中的给定值创建一个玩家的名字。它不会更新您所在州的播放器阵列。所以，请与我们分享更多的代码。你是如何传递道具的？你的输入意图是什么？不工作是什么意思？函数是否未调用/它传递了错误的值，因此状态更新错误/值正确，但状态未更新？您可以在

handleChange

中添加console.log以进行检查：更新了更多代码的主要帖子：）谢谢！非常感谢。但是，在执行handleChange之后，firstName仍然没有从输入值中得到更新。另外，你能给我解释一下…prev.player是如何工作的吗？我对js还是很陌生。非常感谢。你可以看到我的代码片段。这对我的案子有效。只需根据这一点更换相关部件即可。别忘了在你的状态下更换

播放器

。它应该是一个对象，而不是数组

prev

部分与

setState

的功能更新相关，

..

是扩展语法。如果你还有问题，我会尽力解释。谢谢！你的解决方案奏效了！最初，我将

player

定义为一个数组而不是一个对象，因为在我的PlayPerform中，我希望用户能够输入多个玩家的信息。如果将

player

作为对象，我如何能够为多个玩家获取输入？如果将玩家信息作为对象保存，则无法执行此操作。我已经更新了我的答案并添加了一个使用玩家阵列的版本