javascript - 当数据位于数组中时更改 setState 中的值

Question

我有 contactNumber 和数组的数据，我使用 native-base 来查看数据。

this.state = {
    leadProfile: {
      contactNumber: [
          {
          "lead_contact_number": "0912 312 412312",
          "lead_contact_number_type": {
              "lead_contact_number_type": "Mobile"
          }
      },
      {
          "lead_contact_number": "1231234rqdasd",
          "lead_contact_number_type": {
              "lead_contact_number_type": "Mobile"
          }
      },
      {
          "lead_contact_number": "0325 658 58996",
          "lead_contact_number_type": {
              "lead_contact_number_type": "Mobile"
          }
      }
      ]
    },
    contactNumber1: '',
    contactNumber2: '',
    contactNumber3: '',
    contactNumber4: '',
    contactNumber5: '',
  };
}

contactNumber1,2,3,4,5，这是数据更改时的所有容器我也想获取特定字段上的数据

这是我的函数，也是 renderData ....

arrayOfContacts 是我的数据数组，对于我知道不能很好解决的代码感到抱歉，但这就是我认为要编码的内容，如果有好的解决方法，请随意......

此处的目标是显示和更改 lead_contact_number

的值

renderContactForm = () => {

  let arrayOfContacts = _.map(this.state.leadProfile.contactNumber)


  if (_.isEqual(this.state.leadProfile.contactNumber.length, 0) || _.isEqual(this.state.leadProfile.contactNumber.length, 1)) {

    return (
      ...
    )
  } else if (_.isEqual(this.state.leadProfile.contactNumber.length, 2)) {

    return (
     ....
    )
  } else if (_.isEqual(this.state.leadProfile.contactNumber.length, 3)) {
    return (
      <View>
        <Form>
          <Item floatingLabel style={{ paddingLeft: 4 }}>
            <Label style={{ fontSize: 15, color: '#a0a0a0', paddingLeft: 4 }}>
              {arrayOfContacts[0].lead_contact_number_type.lead_contact_number_type}
            </Label>
            <Input
              autoCapitalize="number"
              underlineColorAndroid='transparent'
              onChangeText={(text) => 
              this.setState({
                ...this.state,
                leadProfile: {
                  ...this.state.leadProfile.contactNumber[0],
                  lead_contact_number: text
                },
                contactNumber1: text
              })}
              value={this.state.leadProfile.contactNumber[0].lead_contact_number} />
          </Item>
        </Form>


        <Form>
          <Item floatingLabel style={{ paddingLeft: 4 }}>
            <Label style={{ fontSize: 15, color: '#a0a0a0', paddingLeft: 4 }}>
              {arrayOfContacts[1].lead_contact_number_type.lead_contact_number_type}
            </Label>
            <Input
              autoCapitalize="number"
              underlineColorAndroid='transparent'
              onChangeText={(text) => this.setState({
                ...this.state,
                leadProfile: {
                  ...this.state.leadProfile.contactNumber[1],
                  lead_contact_number: text
                },
                contactNumber2: text
              })}
              value={this.state.leadProfile.contactNumber[1].lead_contact_number} />
          </Item>
        </Form>

        <Form>
          <Item floatingLabel style={{ paddingLeft: 4 }}>
            <Label style={{ fontSize: 15, color: '#a0a0a0', paddingLeft: 4 }}>
              {arrayOfContacts[2].lead_contact_number_type.lead_contact_number_type}
            </Label>
            <Input
              autoCapitalize="number"
              underlineColorAndroid='transparent'
              onChangeText={(text) => this.setState({
                ...this.state,
                leadProfile: {
                  ...this.state.leadProfile.contactNumber[2],
                  lead_contact_number: text
                },
                contactNumber3: text
              })}
              value={this.state.leadProfile.contactNumber[2].lead_contact_number} />
          </Item>
        </Form>
      </View>
    )
  } else if (_.isEqual(this.state.leadProfile.contactNumber.length, 4)) {
    return (
     ...
    )
  } 

}

_.isEqual(this.state.leadProfile.contactNumber.length, 3) 上的数据将为 true 当我尝试编辑文本字段时，数据会更改并恢复为默认数字。

Answer 1

需要压缩大量标记。让我向您展示一种更简单的方法来呈现表单并更新相应的值。请参阅此沙箱以了解操作:https://codesandbox.io/s/boring-hill-i3prc

class NumberForm extends Component {
  constructor(props) {
    super(props);

    this.state = {
      leadProfile: {
        contactNumber: [
          {
            lead_contact_number: "0912 312 412312",
            lead_contact_number_type: {
              lead_contact_number_type: "Mobile"
            }
          },
          {
            lead_contact_number: "1231234rqdasd",
            lead_contact_number_type: {
              lead_contact_number_type: "Mobile"
            }
          },
          {
            lead_contact_number: "0325 658 58996",
            lead_contact_number_type: {
              lead_contact_number_type: "Mobile"
            }
          }
        ]
      }
    };
  }

  handleChange = (e, numberIndex) => {
    const { contactNumber } = this.state.leadProfile;

    const updatedNumbers = contactNumber.map((number, index) => {
      if (index === numberIndex) {
        return {
          ...number,
          lead_contact_number: e.target.value
        };
      } else {
        return {
          ...number
        };
      }
    });

    this.setState({
      leadProfile: {
        ...this.state.leadProfile,
        contactNumber: updatedNumbers
      }
    });
  };

  createForm = () => {
    const { contactNumber } = this.state.leadProfile;

    return contactNumber.map((number, numberIndex) => {
      return (
        <div>
          <input
            value={number.lead_contact_number}
            onChange={e => this.handleChange(e, numberIndex)}
          />
          <label>
            {number.lead_contact_number_type.lead_contact_number_type}
          </label>
        </div>
      );
    });
  };

  render() {
    return <div>{this.createForm()}</div>;
  }
}

高级积分:

• 我们将像您一样使用联系人数组来创建输入 最初。但我们将使用 .map() 提供的 index 值作为 好吧。
• 我们定义一个事件处理函数来更新我们的数组状态 每当用户输入时，它都会接受索引作为 论证。
• 在设置输入的过程中，我们给它一个事件监听器，配对 它与handleChange()函数，并传入index 我们在 .map()
中迭代的相应对象
• 这个结构让我们可以有效地更新每个输入的数字 即使状态值是对象数组。

保持这样的结构，您应该能够自由地替换输入和标签等标记，并从您使用的任何库中选择组件。