javascript - 从子级到父级的 React hook 回调

Question

我有一个名为 TodoList 的子组件

const TodoItem = ({ checked, children }) => 
   (<TouchableOpacity 
      style={{ backgroundColor: checked && 'red'}}>
      {children}
    </TouchableOpacity>
);

const TodoList = props => {
  const {
    options = [],
    onSelect,
    ...rest
  } = props;
  const [selectedOptionIndex, setSelectedOptionIndex] = useState(null);

  useEffect(() => {
    onSelect(options[selectedOptionIndex]);
  }, [onSelect, options, selectedOptionIndex]);

  const renderItem = (o, index) => {
    return (
      <TodoItem
        key={o + index}
        onPress={() => setSelectedOptionIndex(index)}
        checked={index === selectedOptionIndex}>
        {index === selectedOptionIndex && <Tick />}
        <Text>{o}</Text>
      </TodoItem>
    );
  };

  return (
    <View {...rest}>{options.map(renderItem)}</View>
  );
};

export default TodoList;

我有一个名为 Container 的父组件

export default function() {
  const [item, setItem] = setState(null);
  return (
    <Screen>
      <TodoList options={[1,2,3]} onSelect={(i) => setItem(i)} />
    </Screen>
  )
}

每当选择 TodoItem 时，我希望使用 onSelect 从子组件到父组件进行回调。但是，每当调用 onSelect 时，我的 TodoList 都会重新呈现，并且我的 selectedOptionIndex 会重置。因此，我的 checked 标志只会在重置为 false 之前短暂更改为 true。

如果我删除 onSelect 回调，它就可以正常工作。但我需要为子级和父级设置 setState 。我该怎么做？

Answer 1

很难说出为什么会发生这种情况，很可能是因为容器的状态正在发生变化，导致所有内容都重新渲染。

不过，像这样的东西应该可以帮助你。

const { render } = ReactDOM;
const { useEffect, useState } = React;

const ToDoItem = ({checked, label, onChange, style}) => {
  const handleChange = event => onChange(event);
  return (
    <div style={style}>
      <input type="checkbox" checked={checked} onChange={handleChange}/>
      {label}
    </div>
  );
}


const ToDoList = ({items, onChosen}) => {
  const [selected, setSelected] = useState([]);
  
  const handleChange = item => event => {
    let s = [...selected];
    s.includes(item) ? s.splice(s.indexOf(item), 1) : s.push(item);
    setSelected(s);
    onChosen(s);
  }
  
  return (
    <div>
      {items && items.map(i => {
        let s = selected.includes(i);
        return (
          <ToDoItem 
            key={i} 
            label={i} 
            onChange={handleChange(i)} 
            checked={s}
            style={{textDecoration: s ? 'line-through' : ''}}/>
        )
      })}
    </div>
  );
}

const App = () => {
  const [chosen, setChosen] = useState();
  const handleChosen = choices => {
    setChosen(choices);
  }
  return (
    <div>
      <ToDoList items={["Rock", "Paper", "Scissors"]} onChosen={handleChosen} />
      {chosen && chosen.length > 0 && <pre>Chosen: {JSON.stringify(chosen,null,2)}</pre>}
    </div>
  );
}

render(<App />, document.body)

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.9.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.9.0/umd/react-dom.production.min.js"></script>