Question

我有以下课程：

class App extends Component {

  constructor(props){
    super(props);
    this.state = {value: 'currentlyReading'};

    this.handleChange = this.handleChange.bind(this);
  }

  bookOptions = [{
        value: 'currentlyReading',
        text: 'Currently Reading'
    },
    {
        value: 'wantToRead',
        text: 'Want to Read'
    },
    {
        value: 'read',
        text: 'Read'
    },
    {
        value: 'none',
        text: 'None'
    }]

    onHandleChange = (e) => {
        this.setState({
            state: e.target.value
        })
    };

  handleChange(e){
    this.setState({value: e.target.value});
  }
  render() {
    return (
      <select value={this.state.value} onChange={this.handleChange}>
        {
          this.bookOptions.map((c) => {
            <option value={c.value} >{c.text}</option>
          })
        }
      </select>
    );
  }
}

如果我使用常规的html语法渲染选择列表，那么它可以完美地工作，就好像我尝试动态创建它，然后它不会加载任何东西。您将如何动态创建列表以便保持其绑定？

任何建议都将不胜感激！

感谢。

Answer 1

当您在以下代码段中使用花括号时：

this.bookOptions.map((c) => {
  <option value={c.value} >{c.text}</option>
})

您没有返回任何内容，因此您正在渲染未定义元素的数组。删除它，您的代码应按预期工作。请参阅下面的工作代码。

class App extends React.Component {

  constructor(props){
    super(props);
    this.state = {value: 'currentlyReading'};

    this.handleChange = this.handleChange.bind(this);
  }

  bookOptions = [{
        value: 'currentlyReading',
        text: 'Currently Reading'
    },
    {
        value: 'wantToRead',
        text: 'Want to Read'
    },
    {
        value: 'read',
        text: 'Read'
    },
    {
        value: 'none',
        text: 'None'
    }]

    onHandleChange = (e) => {
        this.setState({
            state: e.target.value
        })
    };

  handleChange(e){
    this.setState({value: e.target.value});
  }
  render() {
    return (
      <select value={this.state.value} onChange={this.handleChange}>
        {
          this.bookOptions.map((c) => <option key={c.text} value={c.value} >{c.text}</option>)
        }
      </select>
    );
  }
}

ReactDOM.render(<App />, document.getElementById('app'))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>

Answer 2

我猜你错过了key = {i}

  <select value={this.state.value} onChange={this.handleChange}>
    {
      this.bookOptions.map((c, i) => {
        <option key={i} value={c.value} >{c.text}</option>
      })
    }
  </select>

我猜，不确定对错。

Answer 3

编辑，超出了范围。

您应该将数据设置为道具并将选项添加到对象中，以确保当道具为空时，地图不会被吓坏。

class App extends Component {

  constructor(props){
    super(props);
    this.state = {value: 'currentlyReading'};

    this.handleChange = this.handleChange.bind(this);
  }



    onHandleChange = (e) => {
        this.setState({
            state: e.target.value
        })
    };

  handleChange(e){
    this.setState({value: e.target.value});
  }
  render() {
    let oOptions = [];
    if( this.props.bookOptions ) {
        this.props.bookOptions.map((c) => {
            oOptions.push( <option key= {c.value} value={c.value} >{c.text}</option> );
        });
    }
    return (
      <select value={this.state.value} onChange={this.handleChange}>
        { oOptions }
      </select>
    );
  }
}

App.defaultProps = {
  bookOptions: [
  {
        value: 'currentlyReading',
        text: 'Currently Reading'
    },
    {
        value: 'wantToRead',
        text: 'Want to Read'
    },
    {
        value: 'read',
        text: 'Read'
    },
    {
        value: 'none',
        text: 'None'
    }]
};

您可以从顶级装载的端点获取数据，并将其作为道具传递：

const resp = await fetch('/givemeprops', ...
const { data } = await resp.json();
<App bookOptions={data} />

或者您可以将ajax调用放在任何组件的 componentDidMount react.js生命周期方法中，并将其设置为状态：

componentDidMount() {
  const resp = await fetch('/givemeprops', ...
  const { data } = await resp.json();
  this.setState({ bookOptions: data });
}

并从那里使用它们。

let bookOptions = [{
        value: 'currentlyReading',
        text: 'Currently Reading'
    },
    {
        value: 'wantToRead',
        text: 'Want to Read'
    },
    {
        value: 'read',
        text: 'Read'
    },
    {
        value: 'none',
        text: 'None'
    }];
app.get('/givemeprops',
    res.json({ bookOptions: bookOptions })
);

还有其他解决方案可以管理应用程序的道具/状态/与后端的交互，如Flux和Redux。我也建议你查看graphql。

一些很棒的参考资料：

React Starter Kit

ComponentDidMount Example

将数据从数组加载到响应

3 个答案: