在 React 中的页面上多次使用同一组件时，道具混合

Question

我在 React 中创建了以下组件

<CatFood
  name="Cat Food 1"
  onFoodUploaded={foods=> this.setState({catFood1: this.state.catFood1.concat(foods)})}
/>

这个组件有一个上传食物的按钮（这是一个例子:)）。

当我两次使用这个组件时，在同一页面上一个接一个

    <CatFood
      name="Cat Food 1"
      onFoodUploaded={foods=> this.setState({catFood1: this.state.catFood1.concat(foods)})}
    />
.....
Some Code
.....
    <CatFood
      name="Cat Food 2"
      onFoodUploaded={foods=> this.setState({catFood2: this.state.catFood2.concat(foods)})}
    />

由于某种原因，当我在第二个组件（“猫粮 2”）上上传食物时，它会设置“猫粮 1”的状态，catFood1 正在更新...

我在这里做错了什么？

更新

对我来说，问题是我包含了一个输入元素来上传文件。我还为它附加了一个带有 htmlFor 属性的标签，该属性指向它的 id。

两个组件的输入 id 相同，所以当我点击第二个组件的标签时，它会找到第一个组件的输入标签并通过那里上传文件。

Answer 1

在 render() 中做类似的事情可能会有一些副作用。这被认为是不好的做法。

我刚刚写了一点代码，非常接近您想要实现的目标。希望对您有所帮助。

import React from 'react'


class FoodUploader extends React.Component {
  constructor(props) {
    super(props);
  }

  handleUpload = (e) => {

    const key = e.target.id

    // Here is a good place to define your value variable
    const value = "foods"

    // Keeps the existing state and adds the new one
    // Not very useful in this case, but may be for your case
    let stateObj = {};

    // Create our stateObj with a dynamic key
    stateObj[key] = value

    // Pass our stateObj to the state
    this.setState(stateObj)
  }
  render(){
    return (
    <div>
      <h1>Food Upload</h1>
      <p>{this.state && this.state.catFood1}</p>
      <p>{this.state && this.state.catFood2}</p>
      <br/>
        {/* Replace onClick with onFoodUploaded */}
        {/* Replace div with CatFood */}
        <div
          name="Cat Food 1"
          id="catFood1"
          onClick={this.handleUpload}
        >Cat Food 1</div>

        <div
          name="Cat Food 2"
          id="catFood2"
          onClick={this.handleUpload}
        >Cat Food 2</div>
    </div>
    )
  }
}

export default FoodUploader

Answer 2

在您的第一个代码示例中，您使用onFileUploaded 作为您的事件处理程序。在您的第二个代码示例中，您使用onFoodUploaded。这可能不是您的主要问题，但肯定会引起一些问题！