ReactJS+Redux编辑页问题：JourneyForm无法接收状态对象

Hey there! Let's dig into why your JourneyForm isn't picking up the journey prop from EditJourneyPage. Based on what you've shared, here are some targeted checks and fixes to try out:

1. Verify the journey object is actually found in EditJourneyPage #

You mentioned verifying journey.jourID === props.match.params.id works, but let's double-check the full context:

• Add console logs in EditJourneyPage to confirm the find result isn't undefined:

  // Inside EditJourneyPage (adjust based on class/function component)
  const targetJourney = this.props.journeys.find(journey => journey.jourID === props.match.params.id);
  console.log('Target journey from find:', targetJourney);
  console.log('All journeys from Redux:', this.props.journeys);
  

• Also confirm there's no type mismatch between jourID and params.id (e.g., one is a number, the other a string). Even if you thought === passed, a hidden type issue could break the find logic.

2. Check if JourneyForm is receiving the prop correctly #

Make sure the prop isn't getting lost in transit:

• In JourneyForm, log the received prop to confirm it's arriving:

  // For class components
  componentDidMount() {
    console.log('Journey prop in JourneyForm:', this.props.journey);
  }
  
  // For function components
  useEffect(() => {
    console.log('Journey prop in JourneyForm:', journey);
  }, [journey]);
  

• If you're using a function component, ensure you're properly destructuring props:

  // Correct
  const JourneyForm = ({ journey }) => { ... }
  
  // Wrong (if you forget to destructure)
  const JourneyForm = (props) => {
    // You need to use props.journey here, not just journey
  }
  

3. Confirm Redux connection in EditJourneyPage #

Ensure you're actually pulling the journeys array from Redux correctly:

• For class components with connect:

  const mapStateToProps = (state) => ({
    journeys: state.journeys // Match your actual Redux state structure!
  });
  export default connect(mapStateToProps)(EditJourneyPage);
  

• For function components with useSelector:

  const journeys = useSelector(state => state.journeys); // Double-check the state path
  

4. Handle async loading state #

Redux data is often fetched asynchronously, so EditJourneyPage might render before journeys is loaded:

• Add a loading check in EditJourneyPage to avoid passing undefined to JourneyForm:

  render() {
    const targetJourney = this.props.journeys.find(/* your condition */);
    if (!targetJourney) {
      return <div>Loading journey details...</div>;
    }
    return <JourneyForm journey={targetJourney} />;
  }
  

5. Fix form state initialization (if JourneyForm is controlled) #

If your form uses internal state, make sure it's initialized with the journey prop:

• Class component example:

  constructor(props) {
    super(props);
    this.state = {
      jourID: props.journey?.jourID || '',
      title: props.journey?.title || '',
      // Add other form fields here
    };
  }
  
  // Update state when the journey prop changes
  componentDidUpdate(prevProps) {
    if (prevProps.journey !== this.props.journey) {
      this.setState({
        jourID: this.props.journey.jourID,
        title: this.props.journey.title
      });
    }
  }
  

• Function component example:

  const [formState, setFormState] = useState({});
  
  useEffect(() => {
    if (journey) {
      setFormState({
        jourID: journey.jourID,
        title: journey.title
      });
    }
  }, [journey]);
  

Start with the console logs to pinpoint exactly where the issue is—whether the journey is missing in EditJourneyPage, not being passed correctly, or JourneyForm isn't handling it right. That should narrow down the fix quickly!

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