Question

我正在映射json中的一系列维生素，我想在点击时在下拉菜单中返回数组中每种维生素的名称。

我以为我可以在fetch函数中声明一个const变量，并在我的JSX中使用它。

  componentDidMount() {
    fetch('/users')
    .then(res => res.json())
    .then(micros => micros.vitamins.map((micro) => {
      const microVit = micro;
    }))
  }

  render() {
    return (
     <form>
        <label className="nutrient-label">
          Vitamins
        </label>
       <select value={this.props.value} onChange={this.handleChange}>
         <option value="" selected>--Vitamins--</option>
         {microVit.map((vitamin, index) =>
           <option value={vitamin.value} key={index}>{vitamin.name}</option>
         )}
       </select>
    </form>
   )
  }

当我在fetch函数中使用console.log（microVit）时，我确实获得了维生素数组。它只是没有延续到我正在尝试在我的渲染函数的return语句中工作的map函数。

Answer 1

您需要将其存储在状态中并通过setState更新它以使用新数据重新呈现组件：

class ... {
  state = { microVit: [] }

  componentDidMount() {
    ...
    .then(({ vitamins }) => this.setState({ microVit: vitamins })
  }

  render() {
    ...
      {this.state.microVit.map(...

Answer 2

你的const microVit是封装的。

将decleration移动到组件外部，理想情况下将mount方法安装到内部状态或redux存储区。

从fetch调用变量到React渲染函数

2 个答案: