React中如何创建列表项数组？现有实现求优化建议

Hey Jordan, your current code works, but there are several tweaks you can make to align it with React best practices and make it more concise and robust. Let's break down the improvements and the optimized version:

Key Improvements to Implement #

• Add unique keys to list items: React requires a key prop for elements rendered in a list to help it efficiently update the DOM. Your current mapList method doesn't include this, which can lead to unexpected behavior or performance issues. For simple cases like this, you can use the item index (note: indexes are less ideal if items are reordered, but work fine here) or the item itself if you're sure todos are unique.
• Use functional setState for state updates based on previous state: When updating state that depends on the current state (like adding a new todo), using the functional form of setState ensures you're always working with the latest state value, avoiding bugs from React's asynchronous state updates.
• Remove redundant method calls: Calling this.mapList() after setState is unnecessary—React automatically triggers a re-render when state changes, so your list will update without this manual call.
• Simplify event handlers: You can inline small handlers to reduce boilerplate code, making the component more compact.

Optimized Code Example #

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      inputValue: '',
      todo: [],
    };
  }

  handleAddToDo = () => {
    // Use functional setState to safely update from previous state
    this.setState(prevState => ({
      todo: [...prevState.todo, prevState.inputValue],
      inputValue: '' // Reset input in a single setState call
    }));
  };

  render() {
    return (
      <div>
        <br />
        <input
          type="text"
          value={this.state.inputValue}
          // Inline input change handler for brevity
          onChange={(e) => this.setState({ inputValue: e.target.value })}
        />
        <button onClick={this.handleAddToDo}>Add to To-Do list</button>
        <ol>
          {/* Map todos directly in render with proper key prop */}
          {this.state.todo.map((item, index) => (
            <li key={index}>{item}</li>
            // If todos are guaranteed unique, use item as key instead:
            // <li key={item}>{item}</li>
          ))}
        </ol>
      </div>
    );
  }
}

If you prefer to keep the mapList method for better code organization, that's totally acceptable—just make sure to add the key prop there:

mapList() {
  return this.state.todo.map((item, index) => <li key={index}>{item}</li>);
}

These changes make your code more maintainable, follow React's recommended patterns, and avoid potential edge cases with state updates.

内容的提问来源于stack exchange，提问作者Jordan