Question

我有两个文本框，id动态设置为en，可以更改。每次从输入字段发出onchange时，状态都应该更新。问题是，如果我在其中一个输入中键入内容，则另一个输入状态似乎消失了。例如，如果我在test文本字段中键入title，则状态变为：

this.state = {
            translation: {
                en: {
                    title: 'test'
                }
            }
        };

如果我继续在内容文本框中输入内容，它似乎会替换标题状态。像这样，

this.state = {
            translation: {
                en: {
                    content: 'content'
                }
            }
        };

他们应该独立更新状态而不会相互影响。这是我想要的 state

this.state = {
            translation: {
                en: {
                    title: 'title-text',
                    content: 'content-text'
                }
            }
        };

Component

import React from 'react';

export default class Demo extends React.Component
{
    constructor(props)
    {
        super(props);

        // default state
        this.state = {
            translation: {}
        };
    }

    onSubmit(e)
    {
        e.preventDefault();
        console.log(this.state);
    }

    render()
    {
        return (

            <form onSubmit={(event) => this.onSubmit(event)}>

                    <input id="en" name="title"
                           onChange={(event) => this.setState({
                               translation: {
                                   [event.target.id]: {
                                     title: event.target.value
                                   }
                               }
                   })} />

                    <input id="en" name="content"
                              onChange={(event) => this.setState({
                                  translation: {
                                      [event.target.id]: {
                                          content: event.target.value
                                      }
                                  }
                      })} />

                    <button type="submit">Login</button>


            </form>

        );
    }
}

Answer 1

setState 深度合并当前状态和更新。你应该传播你的translation州道具。

this.setState({
  translation: {
    ...this.state.translation,
    [event.target.id]: {
      content: event.target.value
    }
  }
})

Answer 2

行为是正确的。

   e.g: var obj = {a:1,b:3};
            obj = {a:4};//Obj updated. Now obj.b will be undefined.This is what you worried for.

在你的情况下，你可以做这样的事情。它不是最佳解决方案之一。

onSubmit(e)
    {
        e.preventDefault();
        let state = this.state.translation;
        state.en.content =  'content';
        this.setState(state);

        console.log(this.state);
    }

Answer 3

如上所述，setState并没有深度合并值，但你真正需要做的是：

this.setState({
  translation: {
    [event.target.id]: {
      ...this.state.translation[event.target.id],
      content: event.target.value
    }
})

同样的标题。

Answer 4

你忘记了不变性。只需添加到您的代码...this.state中，即可导入之前存在的所有属性。

this.state = {
  ...this.state,
..
}

React：更新一个状态属性会删除状态

4 个答案: