Question

我的状态如下所示

state = { 
        name: false,
        email: false,
        address: false,
        telephone_no: false,
        image: false,
    }

我有如下方法

  makeInputBox = value => {
        Object.keys(this.state).map(item => {
                if(item === value){
                    this.setState({[item]:true},
                        () => console.log(this.state));
                } else {
                    this.setState({[item]:false},
                        () => console.log(this.state));
                }
            }
        );
    }

我有一些像下面的JSX

render() { 
    return (<tr key={this.props.index}>
                <td className="ui header data_type">
                    { this.props.item === 'name'? 'Name':null }
                    { this.props.item === 'email'? 'Email':null }
                    { this.props.item === 'address'? 'Address':null }
                    { this.props.item === 'telephone_no'? 'Telephone No':null }
                    { this.props.item === 'image'? 'Photo':null }
                </td>
            <td>
                { 
                    this.state[this.props.item] ? 
                    <input type="text"/> : 
                    <span className="edit" onClick={()=>this.makeInputBox(this.props.item)}>                                                   
                    Edit</span> 
                }
            </td></tr>
            );
}

我正在获得如下控制台输出

{name: false, email: false, address: false, telephone_no: true, image: false}
{name: false, email: false, address: false, telephone_no: true, image: false}
{name: false, email: false, address: false, telephone_no: true, image: false}
{name: false, email: false, address: false, telephone_no: true, image: false}
{name: false, email: false, address: false, telephone_no: true, image: false}

我的HTML如下所示

状态将其值更改为true和false，但没有反映在JSX中。

这是什么问题？

Answer 1

你不这样认为

  makeInputBox = value => {
    Object.keys(this.state).map(item => {
      if (item === value) {
        this.setState({ [item]: true }, () => console.log(this.state));
      } else {
        this.setState({ [item]: false }, () => console.log(this.state));
      }
    });
  };

与此相同吗？

  makeInputBox = value => {
    this.setState({
      [value]: true
    });
  };

如果要在状态中切换一个值，可以尝试：

  makeInputBox = value => {
    this.setState((currentState) => {
      [value]: !currentState[value]
    });
  };

setState在当前状态下合并您传递给它的更改。您只需要调用所需的更改即可。

Answer 2

也许它只能在您的makeInputBox函数中调用setState一次：

let state = Object.assign({}, this.state);

// Everybody to false
Object.keys(state).forEach(v => state[v] = false)

// es6 set wanted value to true and only one call to setState
this.setState({...state, [value]:true}, console.log(this.state))

状态不会在React.js中立即更新

2 个答案: