React.js中编辑ExpertiseEdit时ContentLeft内容不更新问题排查

嘿，我一眼就看到问题出在哪了——你的handleChangeExpertise方法里的状态更新逻辑完全写错了，这直接导致父组件的state根本没被正确修改，所以ContentLeft组件自然没法同步展示编辑后的内容。

问题根源分析 #

先看你写的handleChangeExpertise方法：

handleChangeExpertise = event => {
  this.setState({
    [event.target.languages]: event.target.value,
    [event.target.tools]: event.target.value,
    [event.target.knowledgeareas]: event.target.value
  })
}

这里有两个致命错误：

1. 错误的state键名：event.target是触发事件的输入框DOM元素，它本身并没有languages/tools/knowledgeareas这些属性！你的输入框上明明设置了name="languages"这类属性，应该用event.target.name来获取对应的state字段名。
2. 冗余的批量更新：每次只有一个输入框在变更，你却试图一次性更新三个state字段，这完全没必要，而且逻辑上也不成立——你总不能让三个输入框的变更都覆盖彼此的值吧？

再看看你正常工作的handleChange方法，其实它也有冗余代码，但核心逻辑是对的：用event.target.name作为state的键。只不过你多写了很多重复的赋值，其实只需要一行就够了。

修正后的代码 #

父组件Dashboard的handleChangeExpertise修正

把方法改成和handleChange的正确逻辑一致（顺便也优化下handleChange的冗余）：

class Dashboard extends React.Component {
  state = {
    name: 'Your Name',
    title: 'job Title',
    email: 'Your Email',
    experience: 'Your Experience',
    languages: 'languages that used',
    tools: 'tools that used',
    knowledgeareas: 'your knowledge areas'
  };

  // 优化后的handleChange，一行搞定所有单字段更新
  handleChange = event => {
    const { name, value } = event.target;
    this.setState({ [name]: value });
  }

  // 修正后的handleChangeExpertise，逻辑和handleChange统一
  handleChangeExpertise = event => {
    const { name, value } = event.target;
    this.setState({ [name]: value });
  }

  // render部分不变
  render() {
    var gridStyle = { padding: '10px', height: '300px', resize: 'auto', overflow: 'auto' }
    return (
      <div>
        <Grid container>
          <ItemGrid xs={6}>
            <ProfileHeader {...this.state}/>
            <Grid container>
              <Grid item xs={6}>
                <ContentLeft {...this.state}/>
              </Grid>
            </Grid>
          </ItemGrid>
          <ItemGrid xs={6}>
            <HeaderEdit onChange={this.handleChange} {...this.state} />
            <ExpertiseEdit onChange={this.handleChangeExpertise} {...this.state} />
          </ItemGrid>
        </Grid>
      </div>
    );
  }
}

为什么这样就能解决问题？ #

当你在ExpertiseEdit的输入框中输入内容时，onChange事件会触发handleChangeExpertise方法：

1. 方法会从event.target中获取当前输入框的name（比如languages）和输入的value
2. 通过[name]: value的方式，精准更新父组件state中对应的字段
3. 父组件state更新后，会重新渲染所有依赖该state的子组件，包括ContentLeft，这样它就会展示最新的内容了

额外小优化 #

其实你的handleChange和handleChangeExpertise逻辑完全一样，可以合并成一个方法，减少代码冗余：

handleInputChange = event => {
  const { name, value } = event.target;
  this.setState({ [name]: value });
}

然后在子组件中统一使用这个方法：

<HeaderEdit onChange={this.handleInputChange} {...this.state} />
<ExpertiseEdit onChange={this.handleInputChange} {...this.state} />

内容的提问来源于stack exchange，提问作者HemalHerath