在选择下拉列表中渲染对象

Question

我是 react.js 的初学者，我真的需要一些帮助，我正在尝试从 mysql 数据库中获取一些数据到 react.js 中的选择下拉列表中，但数据将在[object, Object] 并且不会加载到选择中。

我的选择下拉列表不是空的，“数据”只是在文本中不可见。即，我的食物对象中有三个项目，在我的选择下拉列表中，我有三个空白项目可供选择，一旦我点击一个“项目”，我会收到错误消息“TypeError：无法读取属性'map '未定义的”。

我已经尝试过 (React selecting option with object as attribut value) 的解决方案，但它不起作用（但这是同样的问题）

我也尝试过使用 JSON.stringify 没有任何成功。非常感谢您的建议！

class Test extends Component {
    constructor(props) {
    super(props);
    this.state = {
        food: []
    };
}

componentDidMount() {
  fetch('/test')
    .then(response => response.json())
    .then(food=> (
      this.setState({food}))
    );
}

 render() {
console.log(this.state);
return <div className="container">
    <div className="selection">
      <Select options={this.state.food} className="dropdown">
      {this.state.food.map((food, index) => (
          <option key={index} value={index}>
            {food.foodName}
          </option>
        ))}
      </Select>
      <div> 

      <p> Listing data from mysql like this works {
        this.state.food.map(food => (
          <li key={food.foodName}>{food.foodName}</li>))}
      </p>
      </div>
    </div>
  </div>
  }
}
 export default Test;

===========================

What I can see in the console (response from the server)

Answer 1

来自服务器的 JSON 响应是：

{ food: [...] }

但是，当你这样做时：

.then(food => (
  this.setState({ food }))
);

您将状态设置为：

{
  food: {
    food: [...],
  },
},

您需要访问响应中的 food 键并将其设置为 state 中的值：

.then(response => {
  this.setState({ food: response.food });
});