# School 模擬面試

## React Sample

下列 Todo List code 有多處問題，並不會順利執行，請指出並說明應該如何改？

import React from 'react';
import { render } from 'react-dom';
import axios from 'axios';

const TodoItem = ({ todo, handleCheck }) => {
  const onChange = e => handleCheck(todo.name, e.target.value);
  return (
    <>
      <input type="checkbox" checked={todo.checked} onChange={onChange} />
      <div>{todo.name}</div>
    </>
  )
}

class TodoList extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      inputValue: '',
      todos: [
        {
          checked: true,
          name: 'debug this page',
        },
        {
          checked: false,
          name: 'test this page',
        },
      ],
      activeIndex: null,
    }
  }

  componentDidMount() {
    this.getTodos();
  }

  componentDidUpdate(prevProps, prevStates) {
    this.setState({ inputValue: '' });
  }

  getTodos() {
    const response = await axios.get('example.com/api/get-todos');
    this.setState({ todos: response.data });
  }

  updateTodos() {
    const postData = this.state.todos;
    axios.post('example.com/api/update-todos', postData)
      .then(res => {
        if (!res.data.result) throw Error('update error!');
        console.log('update success!');
      })
      .catch(window.alert(error.name));
  }

  addTodo() {
    this.setState(prevState => ({
      todos: prevState.todos.concat({
        checked: false,
        name: this.state.inputValue,
      }),
    }))
    this.updateTodos();
  }

  handleCheck(name, checked) {
    const { todos } = this.state;
    todos.forEach(item => {
      if (item.name === name) {
        item = { name, checked };
      }
    })
    this.setState({ todos });
    this.updateTodos();
  }

  render() {
    const { inputValue, todos } = this.state;
    return (
      <h1>Todo List</h1>
      <input type="text" value={inputValue}></input>
      <button onClick={this.addTodo}></button>
      <div>
        {
          todos.map(item => {
            <TodoItem todo={item} handleCheck={this.handleCheck} />
          })
        }
      </div>
    )
  }
}

render(<TodoList />, document.body);

## this
請說明各 console 分別會印出什麼：

function getName() {
  return this.name;
}

const name = 'A';
const obj = {
  name: 'B',
  getName: getName,
  props: {
    name: 'C',
    getName: () => this.name,
  }
}
const test = obj.getName;

// 1.
console.log(obj.getName());

// 2.
console.log(obj.props.getName());

// 3.
console.log(test());

## value type
請說明各 console 分別會印出什麼：

const a = [1, 3, 5, 7, 9];
const b = [1, 3, 5, 7, 9];
const c = '1,3,5,7,9';
const d = a;

// 1.
console.log(a === d);

// 2.
console.log(b === d);

// 3.
console.log(c == d);

// 4.
const e = a.push(11);
console.log(e);

// 5.
console.log(d);

## setTimeout
請說明各 console 分別會印出什麼：

for (var i=0; i<5; i++) {
  setTimeout(() => {
    console.log(new Date, i);
  }, 1000);
}

console.log(new Date);

如果要印出 0 1 2 3 4 應該怎麼改？
如果要每隔一秒才印出一個數字應該怎麼改？

## complexMultiply
Finish complexMultiply

const complexMultiply = 

console.log(complexMultiply(2)(3)(4)) //24
console.log(complexMultiply(3)(4)(5)) //60